Due to how some of our pages work, JS can get injected into the page at any point and sometimes this JS closes the current window. The problem is that I need to attach an event listener to the onunload of the window so that a value may be returned from the window to the parent page. But because the window close script may be injected at any point, I can't bind this event to the onload due to how it works so I was hoping to use DOMContentLoaded since that event will trigger before the injected script does.
However in my tests, I cannot get anything to bind to DOMContentLoaded on the parent page where the new window is being created.
Here is an what I am currently working with: Plunker
We only need this to work in Chrome at the moment.
Our current method of doing this works like this (pseudocode):
onButtonClick = function(){
win = window.open(...);
win.onload = function(){
win.onunload = function(){
//Bind some function that will get the window's "return value" and pass it to the parent page
//This will never happen if the window closes itself before the page is done loading
};
};
};
Can I use DOMContentLoaded to accomplish what I want? If so, how do I properly attach it to the window?
Note: I cannot bind the "onunload" event directly to the window once it is created. It seems to fire the "onunload" event twice (once when the window opens and once when it closes). You can see this happening if you use the "bindOnCreate" function in my example.
addEventListener('click', function(e) { if(e.target.id == 'submit-button') { alert('CLICKED'); } }); // #submit-button is dynamically created document. querySelector("#button-container"). innerHTML = '<button id="submit-button">Submit</button>'; // click on #submit-button will now work document.
This is a lot simpler than you think, in our function that will create our new element, we need to attach the event handler, and function we want to assign to it, this can be done like so: // Create the new element var li = document. createElement('li'); li. className = 'dynamic-link'; // Class name li.
The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A different event, load , should be used only to detect a fully-loaded page.
The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded , which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.
If you change line 58 from
w.document.addEventListener('DOMContentLoaded', ...)
to
w.addEventListener('DOMContentLoaded', ...)
it works. I'll try to explain what's actually going on under the hood:
about:blank
. You can check this by logging w.location.toString()
in onunload
event handler (see next step).window.open
, thus triggering onunload
for about:blank
(first time).about:blank
page because you added events to window.document
, not window
; and right now as we have another URL loaded, window.document
is completely different object than one step before.onunload
is triggered again (second time) because your onunload
event was connected to window.If you addEventListener
for pop-up's window
, it receives events from all window.document
-s that will be loaded inside that window because of JS event bubbling mechanism.
I hope this answers your questions.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With