i wanna know whats the difference between document && window in jQuery ??
These two are used quite often, but i hv never got the difference between them.
Phew . . . that's actually a lot bigger of a question than you may realize. :)
The Extremely Short Answer is . . .
The window object represents the container that the document object is displayed in. In fact, when you reference document in your code, you are really referencing window.document (all properties and methods of window are global and, as such, can be referenced without actually specifying window at the beginning . . . e.g., document = window.document and alert() = window.alert()).
The document object is the currently loaded DOM document . . . so, if you go to http://www.stackoverflow.com, the document object would be all of the HTML, JS, CSS, etc. that are loaded to make up the StackOverflow home page. If you click on the link to this question, the document is now all of the same kinds of assets that make up the page for this question. When you change documents though, you are still in the same window (though some of the properties of the window have changed).
For LOTS of information on the two objects (including standard properties and methods), check out these links:
the window object - https://developer.mozilla.org/en-US/docs/Web/API/Window
the document object - https://developer.mozilla.org/en-US/docs/Web/API/document
One last note: While not completely accurate, if you are a visual person, you can think of the window as the browser window or tab that you have open to view web pages . . . you may move through many documents as you are surfing, but, if you never change to a different tab, you are always in the same window.
This article explain benefits of both
http://web.enavu.com/daily-tip/daily-tip-difference-between-document-ready-and-window-load-in-jquery/
In short term:
window - you can handle if user interact with window (open, close, etc..)
document - is a content of window and you can handle if user iteract with content (watched, fired some events like a click, change etc)
But keep in mind !! They are different objects and does different
things.
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.
For More detail with screenshot read following article
http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/
Related
Since I've tried out webworkers for the first time I'm struggling to find a real use case for them. Communication with them isn't as easy as just passing objects or references, they don't have a window object so I can't use JQuery and the increased complexity of building an interface is not worth the load saved on the main thread. So all the options I'm left with are basically working through large arrays to gain a performance advantage.
Today I thought about opening a new window by window.open() and use the newly created window object to do some task and pass the result back to the main window. I should even be able to access the DOM of the main window by accessing the window.openervariable in the new window.
My questions are:
Is that really going to give me a performance advantage?
Are there any caveats about this idea besides more complicated debugging?
Can I access the DOM of the main window from the new window using the window.opener variable and take the load of creating new DOM elements from the main thread?
Is that really going to give me a performance advantage?
No, as long as you can access window.opener or access objects from one tab to another, that means they share same instance of javascript interpreter, and javascript interpreter is single-threaded.
There is literally no (practical) way around this. You either have separate thread, or share same objects.
Are there any caveats about this idea besides more complicated debugging?
Main caveat: it does not work. Also caveat: separate window is probably not something suitable for production.
Can I access the DOM of the main window from the new window using the window.opener variable and take the load of creating new DOM elements from the main thread?
You can, but you should probably use correct document instance for calling document.createElement.
So all the options I'm left with are basically working through large arrays to gain a performance advantage.
That's exactly what workers are for, unless you are processing large amount of raw data, they are probably not a solution to your problem.
If you have performance drops when creating DOM nodes, you're most likely doing something wrong. Remember that:
createDocumentFragment exists for creating self contained element groups before appending them.
innerHTML causes DOM to rebalance tree in which you cahnged the HTML
new Text or document.createTextNode can be used to fill in text without innerHTML
If your page is scrollable table of many items, only those on screen need to be rendered.
You should also profile your code using developper tools to see where is the performance bottleneck. WebWorker is for data processing (eg. resizing images before upload), not for DOM manipulation.
Final note: it's the end of 2019, "I can't use jQuery" shouldn't be a problem any more. We now have document.querySelector and CSS animations, which were main uses of jQuery in the past.
I want to choose a specific window, and perform operations on that window- I will pass that window as a parameter to another function which does the work...
I know beforehand, that the title of the windows is (for example) "XYZ"
How do I select the window in browser with that title?
I found that in javascript there are ways to assign a title to a window, but I couldnt find a way to search for and find the window which has a specific title.
You cannot select other windows, unless you've already got a reference to it.
There are two methods to get a reference:
The window.opener property holds a reference to the window which opened the current one.
Saving the return value of window.open() also offers a reference.
Each reference to another window will be a window object. window.document.title can be used to read the value of the title. (where window is the reference to the other window).
Cross-domain restrictions will prevent other windows from being read, though.
See this answer to read the document/window object of embedded frames.
I have been writing a browser based application (or rather, rapid prototyping an application) using HTML and Javascript. I would like the main window to be able to display popup windows with dynamic data. However, I cannot figure out how to push data from a parent window to a popup window in Javascript. Note, I am working with the assumption that the application may be used in "offline" scenarios, so all dynamic data should be coming from the main window.
Ideally, I'd like to write
var popup = window.open("popup.html", someidentifier, "");
popup.document.getElementById("SomeIdInPopupHtml").innerHTML = "1,2,3,4";
However, the getElementById function returns NULL. How can I push data to popup windows from a parent window?
Is the popup serving content from a different domain than the parent? If so, the short answer is you can't.
The long answer is that you can sent the popup's href fragment (i.e. the part after the # in protocol://server/path?query#fragment). If the content in the popup knows to check its fragment for changes, then you can pass data to it.
If it's from the same domain then your code should work, as long as an element with that id exists.
However, the getElementById function returns NULL.
Because popup.html hasn't loaded yet. If you want to interact with content from the document, you'll have to call back later when it has finished loading.
For completely dynamic popups, open them with a blank URL and popupwindow.document.write their content into them. For co-operatively-scripting popups loaded from a separate document, have the child document call its parent when it is ready to be accessed. Or just use in-page pop-up divs which are typically less annoyance, both for you as a coder and for the end user.
Let me start off by presenting a possible solution that I just experimented with. I would like to encourage feedback and better solutions, however...
Its not very neat, but I can append GET-style query parameters to the source URL of the popup:
var popup = window.open("popup.html?" + identifier, somename, "");
Now in my particular situation, the popup is a view to some model identified by a unique ID, so the popup window can ask for the parent window for data related to that ID:
var model = window.opener.getModel(document.location.href.split("?")[1]);
do_something_with_model(model);
This strategy won't work in all cases, especially when the data is not easily marshaled into the getModel() implementation. However, in my case, I think this approach may work.
I'd appreciate feedback on this strategy. Thanks!
When the user clicks on your link to open the popup window pass a query string to it and then react to that value with your server side code.
Im using firebug to debug jquery and in the dom tab i can see all the vars and arrays in there.
How do I access the different arrays and vars in the dom?
Cheers
Ke
I cannot access these object items, even though firefox lists them, i have sitems in the top level of the dom, i also have sitems within the parent variable.
a lot of head scratching happening here, would be grateful for any help :)
Looks like you want to access a user defined property, since these are not properties of the DOM ( Firebug Wiki DOM panel page. ), I don't think you can access them directly through your page, but you can access them through the Firebug console.
Simply type the name of the property into the command line of the Console... the part after >>> on the very bottom.
In your case you would type something like: sitems[0] and hit enter.
To access properties of the DOM... take a look at the DOM exploration page for Firebug.
To see how to access properties, functions, or constants of the DOM, check what you're interested in in the DOM tab.
Then you can "follow the bread crumbs" to access properties directly. Global properties are attached to window, so you don't need to include window:
Make sure to right click on things and explore the context menu, especially if you start looking at functions.
If it's an array you should access it as an array by referencing the index in the Array you are trying to access.
alert(sitems[1]);
If it's an object you can reference by using the "key" for the property or method of the object you are trying to access:
alert(sitems["keyName"]);
Likewise some of the stuff you'll see in the DOM tab are actually references to methods and objects within the DOM, so if you're going to call them or reference them you need to do so based on their type, or you may even need to provide arguments to them in order to get a response.
It's giving 'undefined' because you can't output the contents of an Array just by calling its name.
Rather simple question here. I want to create an JS object that has a property, say, name. I want to create that object and be able to use it throughout my page. For example, what I have now doesn't work:
var item = new Object();
function makeItem(title) {
item.name = title;
}
Inside a modal dialog:
makeItem("test");
alert(item.name); // returns "test"
Once I close the dialog, however, all of the information related to item is gone. For example, I can't go ahead and see if item.name contains anything the next time I try to create the same dialog.
Nothing is currently inside a document.ready().
Clearly I'm not fully capturing the idea of the DOM. Would you mind enlightening my poor brain?
As Jon correctly states, more details and code would help understanding your situation.
From your symptoms though I'm guessing you have a dialog.html page with the script trying to "makeItem" and this dialog.html is loaded in a frame or even a separate browser window/tab each time you "open the dialog".
A little theory
In browsers all JavaScript objects and code "belong" to one of the open "pages". A page may be open as a top-level page in a browser tab or a separate window, or in a frame (in which case it appears to be part of its parent page, but its JS is still separated from the parent).
Each open page its own "global object", which is commonly referred to as window. The global functions and variables you define at the top level in a <script> are attached as properties on this global object.
When you open the same page twice (simultaneously -- in two tabs side by side -- or closing the first one before opening the second copy), each copy gets its own global object, completely separate code and objects.
Generally when a page is closed, the global object of that page and all its properties (including any objects and functions) are destroyed.
This is why item in your example loses its properties when you close and re-open the dialog (assuming my initial guess was correct).
References to another window
The proper fix to your problem depends on what you're trying to achieve.
If you need to communicate from the opener page to the opened dialog and back, you can save the reference from the window.open() call:
var w = window.open(...dialog URL...);
After the dialog is loaded, w will point to the dialog's global object and you'll be able to poke it. Similarly, from the dialog you can access the global object of the page that opened the dialog via window.opener.
So you can create item in the opener's context by putting the following in the dialog's <script>:
opener.item = {title: "test"};
...and it will live as long as the opener page.
Real persistence
If you need real persistence (e.g. across browser restart), your only options until recently were cookies or server-side storage. In modern browsers you can use Web storage (localStorage, sessionStorage objects) for that.