iFrame links

Hi there

I know this is probably impossible from the outset but I’m still hoping to be pleasantly surprised

Is there any way I can add some extended code to an iFrame to disable any links that are contained within it?

I’m looking to use an iFrame to preview a webpage but don’t want the links within that page to work or, alternatively for all of them to be redirected back to that page.

Anyone able to take up the challenge to make the impossible possible?

Thanks

Gordon

http://www.gordonlow.net/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I don’t know how you’re going to make this work. You can’t reach into a foreign site (served from a different domain than your own) with JavaScript – that violates the Single Origin Policy security restriction. You could try floating a transparent layer over the top of your iframe, but I believe that iframes are like plug-in content, and they cut their way through the z-axis all the way to the top of the browser.

If you want to make a preview of a site, there are a number of services out there that basically take a screenshot of the site and make it available in a “tooltip” or other display modes. You might want to use one of those, or just take a screenshot of the foreign site and paste it into a graphics box in Freeway.

Here’s one (top link in google for ‘web site preview screenshot’): http://www.websnapr.com/ It’s free, and looks pretty simple to use, although I haven’t tried it.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I just tried this, and guess what – it worked just fine. Draw your
iframe, set it for your content, then draw a second layer over the top
of it (just an empty HTML box drawn while the CSS Layout button is
on). The layer will capture any clicks, and they won’t pass through to
the underlying iframe.

Walter

On Feb 13, 2009, at 9:35 AM, waltd wrote:

You could try floating a transparent layer over the top of your
iframe, but I believe that iframes are like plug-in content, and
they cut their way through the z-axis all the way to the top of the
browser.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter

Thanks for your suggestions. I didn’t know you could get automatically updated thumbnails served to a website and this could be the way to go.

Your layer option would be the best but the iFrame is held in a table cell and its final position would be determined by the size of the text preceding it and this would be down to individual users’ settings. Could there be a way to lock the layer to the (variable) position of the iFrame?

Many thanks again.

Gordon


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You could possibly do this, but it’s going to take a lot of fiddling
around in JavaScript. Basically, you would dynamically insert a guard
DIV over the top of any TD that contained an iframe.

You can do this using Protaculous to get Prototype.js into your page.
Note that this will kill ALL iframes in your page, so it’s using a
sledgehammer to kill a fly.

Download Protaculous from FreewayActions.com. Install it on your copy
of Freeway. Apply the Protaculous Action to your page, and make sure
that the Actions palette is open so you can see its interface. Set the
Library picker to prototype-packed.

Click on the top-most Function Body button, and paste in the following
lump-o-code:

var page = $('PageDiv');
$$('td, div').each(function(elm){
	if(elm.down('iframe')){
		var guard = new Element('div');
		page.insert(guard);
		guard.setStyle({
			'z-index':1000,
			'position':'absolute'
		});
		guard.clonePosition(elm);
	}
});

This is going to load up an array of all DIVs and TDs on your page,
step through them one at a time, see if they contain any iframes, and
if so, create a covering DIV directly above each one in the z-index of
1000 (significantly higher than any other elements on your page).

This is going to run before anything displays in the browser, but it
has to inspect every single element of your page. If your layout is
even remotely complex, this will add a measurable amount of time to
your page load. You can speed it up somewhat by changing the second
line to only look in TDs (just remove the ‘, div’ part from the double-
dollar function) if you are certain that you aren’t placing any
iframes in DIVs.

Let me know how this works out for you, and also be sure to test on a
Windows browser. There have been some reports that the
document.observe method (what we use to load this script before the
browser even loads) is somewhat temperamental in certain versions of
IE. If you experience this, then the trade-off is to move this
function into the second Function Body instead. That runs after the
page has finished loading, which means that your iframes will be
“unguarded” for a moment, but it also will cause them to be guarded in
all browsers.

Walter

On Feb 13, 2009, at 11:10 AM, Gordon Low wrote:

Could there be a way to lock the layer to the (variable) position of
the iFrame?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi again

Just to wrap this thread up neatly Walter continued to offer his invaluable help offline but ultimately a solution that worked in all browsers couldn’t be found.

Gordon

http://www.gordonlow.net/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options