Why there are multiple window objects in heap snapshot - javascript

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

Related

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

JavaScript - multiple global objects in multiple HTML frames?

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.

In Plain/Pure Javascript, how do you find out what available methods or properties an element object has?

Using only pure javascript without jquery, how do you display all the possible methods and properties of an element object? Say I have the body object - document.getElementByTagName('body')[0]
How do I list out all the possible methods I can use? And what properties it has? I know I can use .click() and .setAttribute but what else is there?
How would I find out using the Chrome console?
Rather than using console.log, I'd suggest console.dir
console.dir(myObj);
dir will show your Object's properties even if you pass a Node, rather than showing the tree-view in the console, which will happen with log if it recognises the Object as a Node.
Somewhere in your code you want to log the object to the console:
console.log(MyObjectInstance);
Then when you open chrome developer tools you can go to 'console' and view your object. There should be a little arrow next to the logged object that you can click to view all of its methods and attributes.

Javascript - meaning of "parent.parent.someFunction();"

In a webapplication I came across, there is a javascript line in logout.jsp as:
parent.parent.renderProcessingTextOff();
On debugging the page with IE script debugger, it is breaking on above line with error as:
Object doesn't support this property or method
What is the meaning of this error?
How to solve it?
I am new to javascript, so please explain in simple terms.
Flow of logout is:
on click of logout button, a command is passed and intercepted in interceptor, which directs it to appropriate processor, which forwards the request to logout.jsp.
Its a spring application, if that information is of any help.
Thanks for reading!!
Are there frames or iframes on your page? Or object elements?
parent is a property of the window object (and the window. part of window.parent is assumed if you leave it out).
From MDN:
When a window is loaded in an <iframe>, <object>, or <frame>, its parent is the window with the element embedding the window.
So if from an iframe that is at least two levels down, the line parent.parent.renderProcessingTextOff(); says to call the renderProcessingTextOff() function defined by its grandparent.
Obviously if that line of code appeared where there wasn't a grandparent with that function defined then you'll get the error you quoted.
In this case, it looks like the first word, parent is an object instance. That object has a property called parent, and to access it you use the syntax parent.parent. The property is in turn another object, which is supposed to have a property called renderProcessingTextOff which is called as a function.
If I would venture to guess about your problem, it seems that parent.parent is of the top level Object class, and Object does not have that method.
If you already is using the IE script debugger, put a breakpoint at that line and examine the parent and parent.parent objects.

Why is window.open() loading the URL in the same window?

I read a book about javascript and it says that when we create a function for opening a new window, the reference to the new window object is stored inside the variable assigned to the window.open(theURL , newWindow) call. It also says that if the same variable is used for two or more URLs, no matter which URL I click it would be open in the same window. However, if I create two variables for two window.open() calls, both sites will open in different (new) windows.
Due to curiosity, I tried to use two different variables, but still when I click both links they are still loaded in the same window. How come? I've tried it on Firefox, IE and Chrome to no avail.
The book is partly correct, however what you actually need is two different values, not really two different variables. If you have two variables with the same value, the result is the same as using the same variable. It's the value that matters, not what variable you use to supply the value.
The second parameter to the open method is the target. If you use a value like for example 'win42', that will be used as the name for the window. If you call open again with the same value for target, it will open in the same window.
You can use the special value '_blank' as target to always open a new window.

Categories