Question

122

Difference between contentDocument and contentWindow javascript iframe/frame access properties

rated 0 times [ 126] [ 4] / answers: 1 / hits: 34222 / 11 Years ago, wed, june 19, 2013, 12:00:00

What is the difference between these two properties (contentDocument and contentWindow)?

Is there any difference in the way they acces the content in the
frame/iframe?

Is there any performance issues?

Should I use contentXXXXX.document.getElementsBy... or
contentXXXXX.getElementsBy...?

I've been searching around in the web but haven't found too much information and before I did a big research I thought I could ask the great community here at stackoverflow. As a comment I'm doing a script that counts inputs on a web page, accessing all levels of frames or iframes and adding those inputs found inside the frames/iframes to the global count. All content is supposed to be from the same domain so no there should be no problems with same-origin-policy, I believe. For the script I'm using pure JavaScript no jQuery or any frameworks/libraries that make life easier u_u jaja. This is a practice script and if anyone would like a look at the code I'll post it, no problem. Thanks for anyone who takes the time to explain this!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaredsages

Add To Favorites

Follow

Total Points: 273

Total Questions: 97

Total Answers: 105

Location: French Southern and Antarctic Lands

Member since Fri, Jan 6, 2023

1 Year ago

jaredsages questions

1 Unexpected reserve word 'await'

Tue, Aug 17, 21, 00:00, 3 Years ago

1 React.JS App MODULE_NOT_FOUND error on 'npm start'

Sun, Jan 10, 21, 00:00, 3 Years ago

1 Next-Pwa not working on production server such as Nginx

Fri, Oct 23, 20, 00:00, 4 Years ago

1 How to call Vue instance in chrome console, if he created in a separated file

Mon, Aug 31, 20, 00:00, 4 Years ago

1 Record voice with recorder.js and upload it to python-flask server, but WAV file is broken

Mon, Feb 3, 20, 00:00, 4 Years ago

View All

answered 11 Years ago ramseydeshaunc · Accepted Answer

I think the <iframe> MDN documentation explains it well:

With the DOM HTMLIFrameElement object, scripts can access the window object of the framed resource via the contentWindow property. The contentDocument property refers to the document inside the <iframe>, same as contentWindow.document.

From the inside of a frame, a script can get a reference to its parent window with window.parent.

Script access to a frame's content is subject to the same-origin policy. Scripts cannot access most properties in other window objects if the script was loaded from a different origin...

So you would use contentWindow the same way you use window and contentDocument as you use document.

Also note how it relates to the frames property

window.frames[0] is the same thing as document.getElementsByTagName("iframe")[0].contentWindow

So these statements are true:

// the window property refers to itself https://developer.mozilla.org/en-US/docs/Web/API/Window/window

window.frames[0] 

=== window.frames[0].window;



// the frames' window *is the same* as contentWindow

window.frames[0].window

=== document.querySelector("iframe").contentWindow;



// the frames' document *is the same* as contentDocument

window.frames[0].window.document

=== document.querySelector("iframe").contentDocument;