Search code examples
javascriptiframeframe

Difference between contentDocument and contentWindow javascript iframe/frame access properties

  • 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!

Solution

  • 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;