Practice Script - Iframe Interaction

FutureWebDev · 05-05-2012, 06:27 PM

When you assign an element of a window to a variable with getElementById() or getElementByName(), that variable is referring to an Element Object that is a property of the Window Object. This behavior is not true for frames, however; the value of the name or ID of a frame element refer to a Window Object as opposed to an Element Object.

This means that you can treat that frame in your code as if it were its own Window Object using the Name or ID that you have assigned to that frame. I provide an example below.

HTML
The id "fone" given to this <iframe> Element does not refer to an Element Object, it refers to a Window Object.

Code:

<p style="color:blue" onClick="chngFrameStyle();">Click Me</p>
<iframe id="fone" src="OreillyCh14v2Iframe.html" width="50%" height="400px" ></iframe>

JavaScript
fone is treated as a Window Object. This Window Object has an Element Object with the id "iframewrap" that will be assigned a backgroundColor value of #444.

Code:

function chngFrameStyle() {	
	fone.document.getElementById("iframewrap").style.backgroundColor = "#444";
}

Before Click

http://www.flickr.com/photos/77924248@N02/7145489961/

After Click

http://www.flickr.com/photos/77924248@N02/6999402854/

devnull69 · 05-06-2012, 08:43 AM

What is the browser restriction for this? It does not work for Firefox 12 at all!

Code:

fone is undefined

And with document.getElementById('fone').document I also get an exception

Code:

document.getElementById('fone').document is undefined

Usually you'll have to use .contentWindow or .contentDocument to get the respective window or document object from inside the iframe!

FutureWebDev · 05-06-2012, 05:37 PM

Quote:

Originally Posted by devnull69

What is the browser restriction for this? It does not work for Firefox 12 at all!

Code:

fone is undefined

And with document.getElementById('fone').document I also get an exception

Code:

document.getElementById('fone').document is undefined

Usually you'll have to use .contentWindow or .contentDocument to get the respective window or document object from inside the iframe!

Can you post the entire code so we can have a look see. I've only tested in FF 8.

Also the error "document is undefined". Isn't that pretty much impossible. Document is always defined right? If document is undefined then there is no way to define a variable to any of that documents properties. Which pretty much renders client-side scripting useless.

devnull69 · 05-07-2012, 10:32 AM

It's not "document" which is undefined, it's rather the document property of your "fone" element.

Where did you define the fone element by the way? It's not mentioned in your code ...

I guess your code is highly depending on IE

Philip M · 05-07-2012, 12:52 PM

In IE9 I get "access is denied".

FutureWebDev · 05-07-2012, 07:39 PM

See below

FutureWebDev · 05-07-2012, 07:54 PM

Ok I think I may need to take this post down. For some reason this isn't working now. Weird. I swear it worked. Let me play. If I can't figure it out by this evening I'll take down the post.

Sorry.

FWD

VIPStephan · 05-07-2012, 10:11 PM

You can’t take down anything, you have to ask one of us.

FutureWebDev · 05-07-2012, 11:31 PM

Ok so the problem with this is that I need to take out any references to ID and keep only references to name.

You can reference with name but not ID.

So instead of:

Code:

<p style="color:blue" onClick="chngFrameStyle();">
			Click Me
		</p>
		<iframe id="fone" src="OreillyCh14v2Iframe.html" width="50%" height="400px" ></iframe>

Change id to name:

Code:

<p style="color:blue" onClick="chngFrameStyle();">
			Click Me
		</p>
		<iframe name="fone" src="OreillyCh14v2Iframe.html" width="50%" height="400px" ></iframe>

That should take care of it. Mods is there anyway I can edit my original post?

devnull69 · 05-08-2012, 07:05 AM

Works also in FF 12 ... I am surprised. I did not know that the chained notation with name attributes includes a document property for an iframe. You never stop learning ...

FutureWebDev · 05-08-2012, 03:14 PM

Quote:

Originally Posted by devnull69

Works also in FF 12 ... I am surprised. I did not know that the chained notation with name attributes includes a document property for an iframe. You never stop learning ...

Yep. Thanks for testing again devnull69.