Difference between contentDocument and contentWindow javascript iframe/frame access properties

Question

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!

Nate Anderson · Accepted Answer · 2023-04-11 22:15:15Z

85

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;

edited Apr 11, 2023 at 22:15

Nate Anderson

21.7k22 gold badges113 silver badges155 bronze badges

answered Jun 25, 2013 at 17:20

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Samuel Lopez Over a year ago

Thanks for the help, I should start looking more closely at the documentation. Thanks for the links it's actually really clear.

David Spector Over a year ago

I tried it out and I can't make the documentation work 5 years later. My CodePen is codepen.io/david263/pen/GwPgwL .

John Gilmer Over a year ago

My IE 11 doesn't have the contentDocument property

thdoan Over a year ago

There are cases where contentDocument and contentWindow.document give different results, so be careful (example). Use contentDocument to be on the safe side.

vsvanshi Over a year ago

@thdoan this happens only for a Cross Domain iframe. For same domain iframe both are fine.

Collectives™ on Stack Overflow

Difference between contentDocument and contentWindow javascript iframe/frame access properties

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related