var openedWindow = window.open("test.html", "title");
openedWindow.addEventListener("load", function() {
console.log("received load event");
}, false);
I want to get the load event from an opened window. The code above works, but the callback function does not get called in Opera 11.62 (works on other browser).
EDIT: It works when i register the event after 0ms timeout:
var openedWindow = window.open("test.html", "title");
window.setTimeout(function() {
openedWindow.addEventListener("load", function() {
console.log("received load event");
}, false);
}, 0);
this seems to be a known bug in Opera - I've pushed the internal bug report (CORE-46278) a little bit forward.
The only workaround I can think of is adding callbacks from the popup contents - type opener.popupLoaded(). This may however offer a performance advantage too - you can start interacting with the popup when its script environment is ready and the script you want to talk to is running, rather than waiting for the load event.
Related
My load events do not always fire in safari or chrome on mac (safari version 7.0.5, chrome version 43.0.2357.124). It works fine in firefox and in any of my windows browsers.
window.addEventListener('load', function (){
alert("loaded js");
}, false);
$(window).bind("load", function() {
alert("loaded jquery");
});
Both functions fire or none of them does.
Does someone know what is happening here?
Thanks for help.
Since that JS is in a separate file, I can imagine that at the time it runs, the load event has already been fired.
You can detect this, however, using document.readyState (see also this question).
It has three possible values:
loading - parsing is still going on
interactive - parsing has finished, but resources are loading
complete - pasing has finished and resources have been loaded
I suggest you check whether document.readyState == 'complete' and run your code, otherwise register an event listener:
~function()
{
var loadJS = function()
{
alert("loaded js");
};
var loadJQ = function()
{
alert("loaded jquery");
};
if(document.readyState == 'complete')
{
loadJS();
loadJQ();
}
else
{
window.addEventListener('load', loadJS, false);
$(window).bind('load', loadJQ);
}
}();
I am trying to create a mini library using MutationObserver to detect changes in DOM but also to fallback to basic Mutation Events in older browsers. So far so good, it works properly in Chrome and Firefox and I tested the fallback in these browsers too - everything worked but when I tested it IE 10 it behaves differently (how unexpected...)
In this library you can simply call:
domWatch(someDOMNode, callback)
callback gets one parameter - an observer with disconnect and observe methods so you can stop watching the node while you do some changes to it and then start watching again.
domWatch(document.querySelector('div'), function (obs) {
setTimeout(function () {
obs.disconnect();
$(obs.node).append('a');
obs.observe();
}, 1200);
});
In the fallback I use mutation events and add/remove event listeners. I think the problem is that in IE the event is not really removed is, it gets stuck in infinite loop (my code is in setTimeout so it will not crash your browser). For some reason it probably thinks that this.realCallback are different functions?
FallbackObserver.prototype.observe = function () {
this.node.addEventListener("DOMSubtreeModified", this.realCallback, true);
}
FallbackObserver.prototype.disconnect = function () {
this.node.removeEventListener("DOMSubtreeModified", this.realCallback, true);
}
I created a mini fiddle only with the problematic code, try to run it in Chrome and then in IE10: http://jsfiddle.net/Hb45w/2/
(Full library Fiddle: http://jsfiddle.net/x6W3p/)
Managed to solve it:
All browsers were correctly removing and adding events - the problem was something else.
The actual problem with IE is probably some aspect of rendering engine - I disconnected the event handler, did the change and started observing again:
obs.disconnect();
$(obs.node).append('a');
obs.observe();
The problem was that the event was obviously attached back before IE finished the rendering (probably some asynchronous execution).
Changing
FallbackObserver.prototype.observe = function () {
this.node.addEventListener("DOMSubtreeModified", this.realCallback, true);
}
to
FallbackObserver.prototype.observe = function () {
var that = this;
setTimeout(function () {
that.node.addEventListener("DOMSubtreeModified", that.realCallback, true);
}, 0);
}
did the trick. But I am not sure whether it will work if some more complex DOM changes will be performed.
I'm trying to execute the following code
window.onunload = function () {
var sTag = document.createElement('script');
sTag.src = 'mysrc';
document.getElementsByTagName('head')[0].appendChild(sTag);
return false; };
}
Itseems to work fine in FF but in chrome I'm getting the download status as cancelled as soon as the unload event is fired. I saw some posts in SO with ajax solutions but I'm executing this script inside a cross domain iframe. Im just trying to log the time for which my api was live in a page per visitor. So, I'm sending some time log information on unload of the page. Is there any work around for the above?
For the purpose of what you described, you can have that script loaded in your page or parent window (you are saying it is an iframe right?) and run a function on window.unload:
window.onunload = function(){
window.top.logtime(); // if it is in the parent, or
window.logtime() //if it is in the same window
};
and don't return false, unload event cannot be cancelled. (in best cases, the user gets an alert dialog that will override the return false statement.)
I think what makes this different is how fast it carries out a new function, before the body gets unloaded. Manipulating the DOM is definitely much slower than making a call.
I have written the following javascript function which hangs up because it never seems to be able to find the canvas_frame element on a loaded GMail page (the compose page). This is begin called via the XUL of a Firefox add-on. Any thoughts on what might be going on?
init : function () {
var frame, interval;
frame = document.getElementById('canvas_frame');
interval = setInterval(function() {
if (frame) {
if (frame.contentDocument) {
clearInterval(interval);
GLOBALS.doc = frame.contentDocument;
onContentReady();
}
}
}, 500);
}
You should prefer to wait for a load event on the frame, rather than polling. But my guess is that the canvas_frame element hasn't been created yet, so you need to fetch it each time inside the polling loop. Otherwise the frame variable is always null.
I have installed the "hello world" dev example for Firefox extensions as described here:
http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-extension/
I have modified the anonymous function that gets passed to gBrowser.addEventListener:
gBrowser.addEventListener("load", function (event) {
var t = event.target;
alert("Content title: " + t.contentTitle);
}, false);
This function is getting called three times for every page load. When I click a link, it fires twice for the current (already loaded page) and once for the new page.
I have uninstalled all other addons (including Firebug) and still it fires 3 times. Does anyone know why this might be?
Thanks Richard
I would recommend you to do something like this:
window.addEventListener("load", function load() {
window.removeEventListener("load",load,false); //no longer needed
window.gBrowser.addEventListener('DOMContentLoaded', function load(event) {
your_addon.init_function(event);
}, false);
In my addon it works. :-)
Hope this helps.
Michał