I am new to Firefox Extension Development and doing my 1st program.
Simply I needed to pop up a alert once it loaded the page.
My code was like this:
var myExtension = {
init: function() {
if(gBrowser) gBrowser.addEventListener("DOMContentLoaded", this.onPageLoad, false);
},
onPageLoad: function(aEvent) {
alert("Loaded");
}
}
window.addEventListener("load", function load(event){
window.removeEventListener("load", load, false);
myExtension.init();
},false);
But I am getting the alert box for couple of times.
Then I found about "#document" and then I added a IF condition:
onPageLoad: function(aEvent) {
if (aEvent.originalTarget.nodeName == '#document') {
alert("Loaded");
}
}
Unfortunately still I am getting the same.
Please advise me on this.
It might be an iframe issue. To filter out iframes:
onPageLoad: function(aEvent) {
let ot=aEvent.originalTarget;
if (ot.nodeName == '#document' && !ot.defaultView.frameElement) {
alert("Loaded");
}
}
You can find description of several methods for intercepting page loads from Firefox addon at MDN:
https://developer.mozilla.org/en/XUL_School/Intercepting_Page_Loads
Choosing right solution depends on what you want to achieve.
Do you want to do something when some specific page loads?
Do you want to do something when any page loads?
Do you need to do it when whole page loads (onload), when the
document is ready (ondomready) or when page displayed in Firefox
changes, e.g. when switching or opening tabs (this requires completly
different approach)?
Related
I created a loading page for my website but I need some help.
The loading page is visible until the full HTML page is loaded and then it fades out. My problem is, I have a video as a background and I would like to make the loading page visible until my video in the background is loaded.
Is that possible? if you can help me, give advice or other, will be grateful.
Frage
JS Script for fadeout
$(window).on('load', function(){
$('.loading').fadeOut(500);
});
With .loading my css of my div with the loading page content.
Video is after, in the HTML body.
Just an idea based on How to call a function after a div is ready?
jQuery(document).ready(checkContainer);
function checkContainer () {
if($('#IDoftheVideo').is(':visible'))){ //if the container of the video is visible on the page
$('.loading').fadeOut(500);
} else {
setTimeout(checkContainer, 50); //wait 50 ms, then try again
}
}
If you want to know if the video is fully loaded, assuming its HTML5, you can get some ideas here:
http://atomicrobotdesign.com/blog/web-development/check-when-an-html5-video-has-loaded/
I guess it would look something like:
window.addEventListener('load', function() {
var video = document.querySelector('#video');
var loading = document.querySelector('.loading');
function checkLoad() {
if (video.readyState === 4) {
preloader.parentNode.removeChild(loading);
} else {
setTimeout(checkLoad, 50);
}
}
checkLoad();
}, false);
If you want to continue using jQuery and your video uses the video tag you can do
$("#myVid").on("loadeddata", function () {
$('.loading').fadeOut(500);
});
There are many other video events that could be fired as well
Thanks Rantanen, I tried your function with a little change for my page.
window.addEventListener('load', function() {
var video = document.querySelector('#login_background_video');
var loading = document.querySelector('.loading');
function checkLoad() {
if (video.readyState === 4) {
loading.parentNode.removeChild(loading);
} else {
setTimeout(checkLoad, 50);
}
}
checkLoad();
}, false);
I guess it is working well, now I can see my video running after my loading page fadeout. I don't have the time at the moment to learn a lot jQuery, js, ... not yet but soon ! Thanks again. Feel free to improve of someone know well how to code JS and HTML.
I want to load stackoverflow page and then raise the alert, strictly one after the other, without using frameworks like jQuery etc.
I have gone through the answers here and visited this too.
I ran the following in browser console. The page loads but the alert is not raised. I am using chrome in windows 8.1.
Try #1:
window.location.href = 'https://stackoverflow.com/';
window.onload = function () { alert("It's loaded!") }
Try #2:
window.location.href = 'https://stackoverflow.com/';
if(document.readyState === "complete") {
//Already loaded!
window.onload = function () { alert("It's loaded!") }
}
else {
//Add onload or DOMContentLoaded event listeners here: for example,
window.addEventListener("onload", function () {/* your code here */}, false);
//or
//document.addEventListener("DOMContentLoaded", function () {/* code */}, false);
}
Try #3:
window.location.href = 'https://stackoverflow.com/';
var everythingLoaded = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(everythingLoaded);
alert("It's loaded!");
}
}, 1000);
Try #4:
Tried setTimeout() too but doesn't work either.
I have tried above examples with window.location.replace() also.
How do I make this work?
P.S: I am novice with javascript. The above codes are not mine but I am just trying to work them out. I don't claim to have understood them completely either.
As Barmar pointed out this is not possible. The new page load will remove all JavaScript from the old page. Some alternatives are:
You can open the new page or in a new tab using the window.open api and attach an event handler.
You can load the page inside a frame (if it doesn't have any restrictions preventing that) and add a load event to the frame.
You can load the page using XMLHttpRequest (or a library of your choice) and insert the result into a <div> though not all of it will probably work.
You don't say what you want to do once the page has loaded. In most cases (generally unless you own the second page) it will not be possible to access any information on the second page.
I have a Tapestry zone, inside which is an <iframe> element. I wanted to do run a simple JS function (just hiding and enabling some stuff, nothing fancy) when the iframe is done loading.
In chrome and firefox, it works just fine, but I'm having issues with IE 9.
function afterExportLoad() {
// hide throbber gif
// enable submit button
}
So, natually, I tried binding it to iframe like this (inline)
<iframe onload="afterExportLoad()" .../>
via PrototypeJS
exportFrame.observe('load', afterExportLoad);
via native JS
if (window.addEventListener) {
exportFrame.addEventListener("load", afterExportLoad, false);
} else if (window.attachEvent) {
exportFrame.attachEvent("onload", afterExportLoad);
} else {
exportFrame.onload = afterExportLoad;
}
Using any way above, it works in everything but IE, but in IE, after the iframe is loaded, the gif is "frozen" and the button is still disabled.
Is there a way to make it work in IE9 (and possibly any other IE versions)?
Thank you :)
So, I was fiddling around a bit and got to this solution:
Added browser checks in the function
function afterExportLoad() {
if (document.getElementsByName('downloadFrame').length > 0) {
var exportFrame = document.getElementsByName('downloadFrame')[0];
if ((Prototype.Browser.IE && exportFrame.readyState == "complete") || (!Prototype.Browser.IE)) {
// my stuff
}
}
}
Changed the event
<iframe onreadystatechange="afterExportLoad();" ...>
And in another function that listenes on zone update where iframe is
if (document.getElementsByName('downloadFrame').length > 0) {
var exportFrame = document.getElementsByName('downloadFrame')[0];
if (!Prototype.Browser.IE) {
exportFrame.stopObserving('readystatechange', exportLoad);
exportFrame.onload = exportLoad;
}
}
If any1 comes up with a better solution, let me know :)
This is my code:
document.addEventListener('load', function () {
alert(document.getElementsByTagName("DIV").length);
}, false);
//'load' event above doesn't show any response, alert isn't showing
alert(document.getElementsByTagName("DIV").length);
// this alert returns 0 it looks like it is called before the page DOM has loaded
window.onload = function() {
alert(document.getElementsByTagName("DIV").length);
};
//returns 0, what the... it seems DOM hasn't loaded also
// but only on some sites, here on stackoverflow and youtube it works,
//but on google.com and many other websites (pcworld.com) shows 0
The same situation in latest stable and alpha Operas.
I suggest you simply do
window.addEventListener('load', function(){}, false)
like you would in a normal script. You could use opera.addEventListener('BeforeEvent.load', ...) but that might not fire if the page's scripts do not listen for load events in some Opera versions.
Some other background reading:
window.onload vs document.onload
addEventListener("input", callback) doesn't work in opera?
I have a Firefox extension that detects whenever a page loads in the browser and returns its window and document. I want to attach some events (that launch functions in my addon's overlay) to elements in the page, but I don't know how to do this in a way that's safe.
Here's a code sample:
var myExt = {
onInit: function(){
var appcontent = document.getElementById("appcontent");
if(appcontent){
appcontent.addEventListener("DOMContentLoaded", this.onPageLoad, true);
}
},
onPageLoad: function(e){
var doc = e.originalTarget;
var win = doc.defaultView;
doc.getElementById("search").focus = function(){
/* ... 'Some privelliged code here' - unsafe? ... */
};
}
};
So can anyone tell me what's the safe way to add these events/interact with the page's DOM?
Thanks in advance!
I think that you want to listen to the focus event, not replace the focus() function:
doc.getElementById("search").addEventListener("focus", function(event)
{
if (!event.isTrusted)
return;
...
}, false);
Usually, there is fairly little that can go wrong here because you are not accessing the page directly - there is already a security layer (which is also why replacing the focus() method will have no effect). You can also make sure that you only act on "real" events and not events that have been generated by the webpage, you check event.isTrusted for that like in the example code. But as long as you don't unwrap objects or run code that you got from the website, you should be safe.