JavaScript - multiple global objects in multiple HTML frames? - javascript

Do we have multiple (different) global objects in a multi-frame frameset HTML?
It's common to use:
if(window.top != window.self) {
alert("We're in a frame");
}
where window is a property of the [[global]] object like self is, and both are references to [[global]] object itself. But, if window.top refers to the topmost window frame object and therefore to the [[global]] object, how many [[global]] objects do we have? Or maybe the window DOM part is changed only?

Each document (therefore each frame) has its own window object.
The window object is not a unique singleton. It's just an instance of Window. One is created for each document, and can be accessed through document.defaultView.
If and only if two pieces of your application share a document, they share a window.
There is no [[global]] object: global scope is just a way of conveniently accessing the current window.

Related

Why there are multiple window objects in heap snapshot

I am learning about heap snapshot and while playing i came across one weird observation
as attached in screenshot I see there are multiple window objects inside "Window" constructor with different #Id.
I have did nothing just opened a new tab and just took a snapshot.
From where these objects are coming ? How they are created ?\
Also what's difference between "Window" "Window /" constructor
Each active Chrome extension, each frame has its own context and a global window object. Click on any Window to see native context or __proto__ or global_proxy. See examples:
Just walk through Window objects and you will see the details w/o having to ask questions on SO. You also will be surprised by having more than 2 extensions.
why there are 2 window object pointing to stackoverflow
What "Window /" represents in highlighted text

How to contain a window object inside shadow-root

I have added a script element inside the #shadow-root. The problem is that when the window object is used inside the b2.js file, it still refers to the parent application's window. Is there a way to scope the window object that is used inside the script file to the #shadow-root exclusively.
Example dom:

What is the DOM and BOM in JavaScript and if BOM is an object how to access it?

There are many question i saw on these concept still i have some doubts that's why asking specifically
What is Browser object Model is this any object in javascript if it is how to access that object and what kind of properties it has
someone please clarify exact definition of each
For example window is a global object created by Javascript engine
We can access it by
window
when we say window we get following properties in console
window
Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}
When we say
window.document
#document<html>​<head>​
​</head>​<body>​…​</body>​<script src=​"app.js">​</script>​</body>​</html>​
Similar way what is BOM and DOM
The BOM consists of the objects navigator, history, screen, location and document which are children of window. In the document node is the DOM, the document object model, which represents the contents of the page. You can manipulate it using javascript.
Reference
What is the DOM and BOM in JavaScript?
All browsers are split into different parts (objects) that can be accessed using Javascript. Collectively, these parts are known as the Browser Object Model, or the BOM. At the very top of this browser hierarchy is the Window object. This represents the entire browser, with its toolbars, menus, status bar, the page itself, and a whole lot more besides. Effectively, the Window IS the browser.
Every web page resides inside a browser window which can be considered as an object.
A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content.
BOM stands for Browser Object Model
DOM stands for Document Object Model
Document is a document object constructor
window is a scripting handle for window object
With Browser Object Model(window Object), you can:
Manipulate the browser window with the window object and things like
scrolling, opening a new window, closing the current window, ..Etc.
Use the object document property to interact with the DOM.
Get the browser history with the history object.
Manipulate the screen with the screen object.
Get and do things with the location object.
With DOM you can:
Change an element text.
Change an HTML element color.
Hide and show elements
Make an HTML elements listen to an event

interact between two different graphs in two different browser windows in dc.js crossfilter

I have created dc.js visualization have four different bar graphs. Also each graph have a button to open that particular graph in new browser window. For that purpose I have created separate HTML file for each graph. I want to interact between the graphs opened in two different windows. Is it possible? How?
Thanks!
window.opener will return a reference to the window object of the window that opened it.
In the first window, you can leave a global reference (let's say var graphThing or window.graphThing) to whatever object you need to manipulate. Then, the window that's launched from the original window can call window.opener.graphThing to access the first window's graphThing.
To access a property of the child window (let's say global var childGraphThing or window.childGraphThing) from the parent that opened it, you can keep a reference to the child window by opening it like this:
var childWindow = window.open('childGraph.html', 'blank_');
Then, you can access it's properties like this:
var childWindowGraphThing = childWindow.childGraphThing;

Should "parent" not be used as javascript variable name (reserved words)

I've often used the word "parent" as a JavaScript variable name, and have never had any problems.
I've recently learned that "parent" can refer to something else such as when used to access an element in an IFrame's parent such as parent.document.getElementById("someID").
Should I stop using the word "parent" as a JavaScript variable name, and go through all my existing script to change it? Note that http://msdn.microsoft.com/en-us/library/ie/0779sbks%28v=vs.94%29.aspx and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words do not indicate that I shouldn't.
'parent' is not a reserved word but a global object in the browser's execution environment. Whether or not you want to have a variable name that conflicts with that is your decision.
For reference, here is a list of actual reserved words in JS:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words
If it makes sense for your variable to be called parent then go ahead and name it that, you just need to be aware that it will shadow the parent property of the window object (the global scope), but that's not an issue since you can explicitly reference that using window.parent rather than just parent wherever you need to work with it.
The only time it should become an issue is if there is code that shares scope with your parent variable which is attempting to access window.parent without explicitly specifying that they want the property, and that's probably an indication that the code needs to be tweaked.
"JavaScript" isn't the same as "ecosystem within which JavaScript is executed".
Browsers have the window and document references, which have properties... like parent. You can still reference the global parent. If your parent is called on a different object there's no collision anyway.

Categories