I'm trying to do something AFTER a script is completely loaded. (IE8)
Script I use for testing: http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
and the invalid one: http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.minaaaaaaaa.js
The code...
var script = create the element and append to head...
// this works fine with FF/Chrome/...
script.onload = function() {alert('script loading complete');}
script.onerror = function() {alert('error loading script');}
// and for IE
script.onreadystatechange = function() {
// this will alert 1.loading 2.loaded
alert(this.readyState);
// this never works
if(this.readyState == 'complete') {alert('script loading complete');}
// this works with either a valid or INVALID url
else if(this.readyState == 'loaded') {alert('script loaded');}
};
In my case, the "complete" never shows, the "loaded" shows even if a url is invalid. So there's no way to tell if a script is CORRECTLY loaded UNDER IE.
Am I doing something wrong? How come I never get the complete state?
UPDATE
OK, I just read some articles and it seems that readystate is not a reliable way to detect script loading.
So is there another way to do so? without jQuery, but pure Javascript.
I've found out a trick how to make script node become 'complete' in IE7 and IE8. And also how to detect when error really happens when loading script (node.onerror working only in IE9+).
The hack is in
NOT inserting the newly created element into DOM (at once).
Calling node.children property and checking node.onreadystate property right after it. If the property changes to 'complete' - you have loaded script, it it changes to 'loading' - it's for sure script loading error.
Try it!
var node = document.createElement('script');
node.src = 'some-[un]existing-url.js';
node.type = 'text/javscript';
node.onreadystatechange = (function(node) {
return function () {
if (/loaded|complete/.test(node.readyState)) {
_finish();
}
};
})(node);
var _finish=function() {
if (node.readyState == 'complete') {
// insert node only after completing the request, though this is not necessary
var head = document.head;
head || (head = document.getElementsByTagName('head')[0]);
head.appendChild(node);
// call success function
_success();
return;
}
var firstState = node.readyState;
// hack: calling 'children' property changes node's readyState from 'loaded' to complete
// (if script was loaded normally) or to 'loading' - if error detected
node.children;
// error detected
if (firstState == 'loaded' && node.readyState == 'loading') {
// custom error code
_error();
}
}
As per your comment, here's a schematic of how to dynamically add a script tag using XHR (XMLHttpRequest):
var handleRequest = function( ) { //!! set up the handleRequest callback
if(this.status != undefined) {
/* do something with the status code here */
}
if(this.readyState == 4) {
var script = document.createElement("script") ;
script.setAttribute("type","text/javascript") ;
var text = document.createTextNode(this.responseText) ;
script.appendChild(text) ;
var head = document.getElementsByTagName("head")[0] ;
head.insertBefore(script,head.firstChild) ;
}
} ;
var request ; //!! supposing you have a way to get a working XHR Object
//.. set the XHR Object
request.open("GET",url,true) ;
request.overrideMimeType("text/javascript") ;
request.onreadystatechange = handleRequest ;
request.send(null) ;
Please keep in mind that this is only to give you an idea of what I mean. A working example would have to be way more elaborate judging from the jQuery source code.
Links:
W3 documentation for XMLHttpRequest
MDN documentation for XMLHttpRequest
MSDN documentation for XMLHttpRequest
Detecting Load Completion
[..]
One web page suggested setting up some event handlers that will be called when the load is complete. We do that by adding the following lines to the previous code:
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.onreadystatechange= function () {
if (this.readyState == 'complete') helper();
}
script.onload= helper;
script.src= 'helper.js';
head.appendChild(script);
Here we set up two different event handlers on the newly created script tag. Depending on the browser, one or the other of these two handlers is supposed to be called when the script has finished loading. The onreadystatechange handler works on IE only. The onload handler works on Gecko browsers and Opera.
The "this.readyState == 'complete'" test doesn't actually entirely work. The readyState theoretically goes through a series of states:
0 uninitialized
1 loading
2 loaded
3 interactive
4 complete
But in fact, states may be skipped. In my experience with IE 7, you get either a loaded event or a completed event, but not both.
It may have something to do with whether you are loading from cache or not but there seem to be other factors that influence which events you get. Sometimes I get loading or interactive events too, and sometimes I don't. It's possible the test should be "this.readyState == 'loaded' || this.readyState == 'complete'", but that risks triggering twice.
http://unixpapa.com/js/dyna.html
UPDATE
Please, can you sobstitute your script.onreadystatechange callback with this:
newjs.onreadystatechange = function () {
if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
newjs.onreadystatechange = null;
alert('script is complete or loaded.");
}
};
An other thing i've noticed is that you're doing string comparison with == operator.
This can be misleading. Use === instead.
Related
I am aware that in Internet Explorer (Pre-IE9) you cannot use document.addEventListener(), instead you must use document.attachEvent. The problem I'm having is that document.attachEvent('onload', AddExternals); does nothing, at all. In the console, the output should be as follows:
- document.attachEvent
- Adding Externals...
- jQuery loaded!
However in IE8, the console output is:
Is there any obvious reason why this would occur in the below code?
if (document.addEventListener) {
console.log("document.addEventListener")
document.addEventListener("DOMContentLoaded", AddExternals);
} else if (document.attachEvent) {
console.log("document.attachEvent")
document.attachEvent("onload", AddExternals);
}
function AddExternals(){
console.log("Adding Externals...");
var jq = document.createElement("script");
jq.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(jq);
jq.onload = function(){console.log("jQuery loaded!")};
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";
}
Edit
I have changed document.attachEvent("onload", AddExternals) and now the console is outputting both document.attachEvent and Adding Externals... but the function never completes?
As far as I know, there is no document.onload event. Instead, you would use window.onload as your fallback. You may also have to test the document state to make sure that it is not already loaded (e.g. the events have already fired).
For a completely tested function to know when the document is ready in any level of browser see the code in this prior question/answer: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
Keep in mind that older versions of IE do not have a .onload for your script tag so you will not necessarily see that console message, but your script should still load. There is a more complicated scheme that will get you notified of when it is loaded for older versions of IE here: javascript notify when script is loaded dynamically in IE
I would suggest you change your script to this:
function AddExternals(){
var doneLoad = false;
function onload() {
if (!doneLoad) {
doneLoad = true;
console.log("jQuery loaded!")
}
}
console.log("Adding Externals...");
var jq = document.createElement("script");
jq.type = "text/javascript";
jq.onload = doneLoad;
jq.onreadystatechange= function () {
if (script.readyState == "loaded" || script.readyState == "complete"){
doneLoad();
}
};
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";
document.getElementsByTagName("head")[0].appendChild(jq);
}
Relevant changes:
Added support for older method of knowing when the script has loaded.
Made sure there is no duplicate load notification since listening for multiple mechanisms
Set .src before inserting the script tag.
I just want to inject jQuery into a webpage from a safari extension. But only to some pages because adding jQuery as a start-/endscript would inject it to all pages and this makes browsing slow.
I tried it by creating a script tag using its onload function:
var node = document.createElement('script');
node.onload = function(){
initjquerycheck(function($) {
dosomethingusingjQuery($);
});
};
node.async = "async";
node.type = "text/javascript";
node.src = "https://code.jquery.com/jquery-2.0.3.min.js";
document.getElementsByTagName('head')[0].appendChild(node);
to check if jquery is loaded i use:
initjquerycheck: function(callback) {
if(typeof(jQuery) != 'undefined'){
callback(jQuery);
}else {
window.setTimeout(function() { initjquerycheck(callback); }, 100);
}
}
But typeof(jQuery) remains undefined. (checked that using console.log()).
Only if I call console.log(typeof(jQuery)) from the debugging console it returns 'function'. Any ideas how to fix that? Thanks in advance!
Extension injected scripts cannot access the web page's JavaScript namespace. Your injected script creates a <script> element and adds it to the page's DOM, but then the jQuery object instantiated by the script belongs to the page's namespace, not to your injected script's.
There are at least two potential solutions. One, inject jQuery into the page the normal way, using the extension API. This method is only viable if the web pages that you are targeting can be categorized using URL patterns.
Two, use Window.postMessage to communicate between your injected script and the web page's namespace. You will need to add another <script> to the page, and in this script, have a listener for the message event. The listener will be able to use jQuery as if it were "native" to the page itself.
Here's some code to get you started, if needed.
In the extension injected script:
var s0 = document.createElement('script');
s0.type = 'text/javascript';
s0.src = 'https://code.jquery.com/jquery-2.0.3.min.js';
document.head.appendChild(s0);
var s1 = document.createElement('script');
s1.type = 'text/javascript';
s1.src = safari.extension.baseURI + 'bridge.js';
document.head.appendChild(s1);
window.addEventListener('message', function (e) {
if (e.origin != window.location.origin)
return;
console.log(e.data);
}, false);
window.postMessage('What jQuery version?', window.location.origin);
In bridge.js:
window.addEventListener('message', function (e) {
if (e.origin != window.location.origin)
return;
if (e.data == 'What jQuery version?') {
e.source.postMessage('Version ' + $.fn.jquery, window.location.origin);
}
}, false);
IE9 is showing false complete property with the following:
$("<img/>",{src:"http://farm2.static.flickr.com/1104/1434841504_edc671e65c.jpg"}).each(function(){console.log(this.complete);});
If you run this code in a browser console, (allow enough time for the image to load) then run it again. IE9 is the only browser I've tested showing false the second time. This seems to be a known bug, from some simple google searching.
I need a workaround if anyone has one.
This could be a timing issue, as letting the code above set a global variable a la:
var img = $("<img....
and then testing that variable's properties gives different results:
img[0].complete === true
and
img[0].readyState === "complete"
There must be some other way of getting this infomation. Any ideas... Thanks!
I use this:
function doWhenLoaded(obj,callback) {
if($.browser.msie) {
var src=$(obj).attr("src");
$(obj).attr("src","");
$(obj).attr("src",src);
}
$(obj).one("load",callback).each(function(){
// alert(this.readyState+" "+this.src);
if(
this.complete
|| this.readyState == "complete"
|| this.readyState == 4
|| ($.browser.msie && parseInt($.browser.version) == 6)
) {
$(this).trigger("load");
}
});
}
A sample:
doWhenLoaded("#main_background_img",function(){
$("#main_background_img").slideDown(1000);
});
This is how i usually preload an image:
var img = new Image();
$(img).attr('src', "foo.jpg");
if (img.complete || img.readyState === 4) {
// image is cached
alert("the image was cached!");
} else {
$(img).load(function() {
// image was not cached, but done loading
alert("the image was not cached, but it is done loading.");
});
}
I haven't deeply debugged it in IE9, but I haven't ran into any issues with it.
the code was pulled from https://github.com/tentonaxe/jQuery-preloadImages/blob/master/jquery.preloadimages.js and modified.
You could try an AJAX request on the image and see the status code. If it's 304 it means the image was cached. Not sure how well that would work though. Maybe AJAX does some cache-busting.
I know this was asked a million years ago, but I figure I would contribute my solution which is similar but has less overhead and i/o.
Basically, you create a custom jQuery method that performs the similar feats all in one function:
$.fn.imgLoad = function(callback) {
return this.each(function() {
if(callback){
if(this.complete || (this.readyState === 4) || (this.readyState === 'complete')) {
callback.apply(this);
} else {
$(this).one('load.imgCallback', function(){
callback.apply(this);
});
}
}
});
}
This consolidates the checking of all possible events into one (both cached and uncached), but also makes the method chainable. You can call it with:
$('img').imgLoad(function(){
console.log('loaded');
});
Works cross-browser, back to IE6. Notice it checks for caching first, and if not triggers a namespaced load event only once to prevent reloads in case you call the function with that logic twice, but also to allow custom load events to be bound (if applicable).
You can't tell if it's cached, but you can force a fresh load by "salting" the filename:
src:"http://farm2.static.flickr.com/1104/1434841504_edc671e65c.jpg?"+new Date()
On my page I need to make a dynamic script with src=some_external_path element.
That script element donwloads some JS inside of itself and that JS intern needs to be executed in order to pull some image content.
My problem is that it needs some time to complete JS execution inside that script element, how is it achievable?
It works if I insert alert by the end of the script or run some awkward for loop, unfortunately it doesn't work with setTimeOut function.
Here is sample code:
var s = document.createElement('script');
s.setAttribute("src", "some_external_path");
document.getElementById('test').appendChild(s);
// if i replace that alert - doesn't work, it seems page needs some delay
alert(document.getElementById('test').text);
I also tried something like:
setTimeout(function(scriptElement){
document.getElementById('test').appendChild(scriptElement);
}, 5000, s);
And it didn't work either, I also have thought of executing code inside that script element but it doesn't seem to work because of security restrictions(script.text or script.innerHTML return blank string);
Can you suggest anything to make this code complete transaction without loops and hopefully self-made delays ?
http://api.jquery.com/jQuery.getScript/
If you do not want to use jQuery, just look it up how it is done and inspire from it.
This should do it (without using jQuery when you don't need to):
var loadScript = function(url, cb){
var s = document.createElement("script"), done = false;
s.setAttribute("src", url);
s.onreadystatechange = s.onload = function(){
if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
done = true;
cb();
}
};
document.getElementsByTagName("head")[0].appendChild(s);
}
And you call it like so:
loadScript("http://path.to.my/script.js", function(){
alert("YAY its loaded");
});
I hope that helps.
I can detect when the content of an iframe has loaded using the load event. Unfortunately, for my purposes, there are two problems with this:
If there is an error loading the page (404/500, etc), the load event is never fired.
If some images or other dependencies failed to load, the load event is fired as usual.
Is there some way I can reliably determine if either of the above errors occurred?
I'm writing a semi-web semi-desktop application based on Mozilla/XULRunner, so solutions that only work in Mozilla are welcome.
If you have control over the iframe page (and the pages are on the same domain name), a strategy could be as follows:
In the parent document, initialize a variable var iFrameLoaded = false;
When the iframe document is loaded, set this variable in the parent to true calling from the iframe document a parent's function (setIFrameLoaded(); for example).
check the iFrameLoaded flag using the timer object (set the timer to your preferred timeout limit) - if the flag is still false you can tell that the iframe was not regularly loaded.
I hope this helps.
This is a very late answer, but I will leave it to someone who needs it.
Task: load iframe cross-origin content, emit onLoaded on success and onError on load error.
This is the most cross browsers origin independent solution I could develop. But first of all I will briefly tell about other approaches I had and why they are bad.
1. iframe That was a little shock for me, that iframe only has onload event and it is called on load and on error, no way to know it is error or not.
2. performance.getEntriesByType('resource'). This method returns loaded resources. Sounds like what we need. But what a shame, firefox always adds Resource in resources array no matter it is loaded or failed. No way to know by Resource instance was it success. As usual. By the way, this method does not work in ios<11.
3. script I tried to load html using <script> tag. Emits onload and onerror correctly, sadly, only in Chrome.
And when I was ready to give up, my elder collegue told me about html4 tag <object>. It is like <iframe> tag except it has fallbacks when content is not loaded. That sounds like what we are need! Sadly it is not as easy as it sounds.
CODE SECTION
var obj = document.createElement('object');
// we need to specify a callback (i will mention why later)
obj.innerHTML = '<div style="height:5px"><div/>'; // fallback
obj.style.display = 'block'; // so height=5px will work
obj.style.visibility = 'hidden'; // to hide before loaded
obj.data = src;
After this we can set some attributes to <object> like we'd wanted to do with iframe. The only difference, we should use <params>, not attributes, but their names and values are identical.
for (var prop in params) {
if (params.hasOwnProperty(prop)) {
var param = document.createElement('param');
param.name = prop;
param.value = params[prop];
obj.appendChild(param);
}
}
Now, the hard part. Like many same-like elements, <object> doesn't have specs for callbacks, so each browser behaves differently.
Chrome. On error and on load emits load event.
Firefox. Emits load and error correctly.
Safari. Emits nothing....
Seems like no different from iframe, getEntriesByType, script....
But, we have native browser fallback! So, because we set fallback (innerHtml) directly, we can tell if <object> is loaded or not
function isReallyLoaded(obj) {
return obj.offsetHeight !== 5; // fallback height
}
/**
* Chrome calls always, Firefox on load
*/
obj.onload = function() {
isReallyLoaded(obj) ? onLoaded() : onError();
};
/**
* Firefox on error
*/
obj.onerror = function() {
onError();
};
But what to do with Safari? Good old setTimeout.
var interval = function() {
if (isLoaded) { // some flag
return;
}
if (hasResult(obj)) {
if (isReallyLoaded(obj)) {
onLoaded();
} else {
onError();
}
}
setTimeout(interval, 100);
};
function hasResult(obj) {
return obj.offsetHeight > 0;
}
Yeah.... not so fast. The thing is, <object> when fails has unmentioned in specs behaviour:
Trying to load (size=0)
Fails (size = any) really
Fallback (size = as in innnerHtml)
So, code needs a little enhancement
var interval = function() {
if (isLoaded) { // some flag
return;
}
if (hasResult(obj)) {
if (isReallyLoaded(obj)) {
interval.count++;
// needs less then 400ms to fallback
interval.count > 4 && onLoadedResult(obj, onLoaded);
} else {
onErrorResult(obj, onError);
}
}
setTimeout(interval, 100);
};
interval.count = 0;
setTimeout(interval, 100);
Well, and to start loading
document.body.appendChild(obj);
That is all. I tried to explain code in every detail, so it may look not so foolish.
P.S. WebDev sucks
I had this problem recently and had to resort to setting up a Javascript Polling action on the Parent Page (that contains the IFRAME tag). This JavaScript function checks the IFRAME's contents for explicit elements that should only exist in a GOOD response. This assumes of course that you don't have to deal with violating the "same origin policy."
Instead of checking for all possible errors which might be generated from the many different network resources.. I simply checked for the one constant positive Element(s) that I know should be in a good response.
After a pre-determined time and/or # of failed attempts to detect the expected Element(s), the JavaScript modifies the IFRAME's SRC attribute (to request from my Servlet) a User Friendly Error Page as opposed to displaying the typical HTTP ERROR message. The JavaScript could also just as easily modify the SRC attribute to make an entirely different request.
function checkForContents(){
var contents=document.getElementById('myiframe').contentWindow.document
if(contents){
alert('found contents of myiframe:' + contents);
if(contents.documentElement){
if(contents.documentElement.innerHTML){
alert("Found contents: " +contents.documentElement.innerHTML);
if(contents.documentElement.innerHTML.indexOf("FIND_ME") > -1){
openMediumWindow("woot.html", "mypopup");
}
}
}
}
}
I think that the pageshow event is fired for error pages. Or if you're doing this from chrome, then your check your progress listener's request to see if it's an HTTP channel in which case you can retrieve the status code.
As for page dependencies, I think you can only do this from chrome by adding a capturing onerror event listener, and even then it will only find errors in elements, not CSS backgrounds or other images.
Doesn't answer your question exactly, but my search for an answer brought me here, so I'm posting just in case anyone else had a similar query to me.
It doesn't quite use a load event, but it can detect whether a website is accessible and callable (if it is, then the iFrame, in theory, should load).
At first, I thought to do an AJAX call like everyone else, except that it didn't work for me initially, as I had used jQuery. It works perfectly if you do a XMLHttpRequest:
var url = http://url_to_test.com/
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status != 200) {
console.log("iframe failed to load");
}
};
xhttp.open("GET", url, true);
xhttp.send();
Edit:
So this method works ok, except that it has a lot of false negatives (picks up a lot of stuff that would display in an iframe) due to cross-origin malarky. The way that I got around this was to do a CURL/Web request on a server, and then check the response headers for a) if the website exists, and b) if the headers had set x-frame-options.
This isn't a problem if you run your own webserver, as you can make your own api call for it.
My implementation in node.js:
app.get('/iframetest',function(req,res){ //Call using /iframetest?url=url - needs to be stripped of http:// or https://
var url = req.query.url;
var request = require('https').request({host: url}, function(response){ //This does an https request - require('http') if you want to do a http request
var headers = response.headers;
if (typeof headers["x-frame-options"] != 'undefined') {
res.send(false); //Headers don't allow iframe
} else {
res.send(true); //Headers don't disallow iframe
}
});
request.on('error',function(e){
res.send(false); //website unavailable
});
request.end();
});
Have a id for the top most (body) element in the page that is being loaded in your iframe.
on the Load handler of your iframe, check to see if getElementById() returns a non null value.
If it is, iframe has loaded successfully. else it has failed.
in that case, put frame.src="about:blank". Make sure to remove the loadhandler before doing that.
If the iframe is loaded on the same origin as the parent page, then you can do this:
iframeEl.addEventListener('load', function() {
// NOTE: contentDocument is null if a connection error occurs or if
// X-Frame-Options is not SAMESITE (which could happen with
// 4xx or 5xx error pages if the corresponding error handlers
// do not specify SAMESITE). If error handlers do not specify
// SAMESITE, then networkErrorOccurred will incorrectly be set
// to true.
const networkErrorOccurred = !iframeEl.contentDocument;
const serverErrorOccurred = (
!networkErrorOccurred &&
!iframeEl.contentDocument.querySelector('#well-known-element')
);
if (networkErrorOccurred || serverErrorOccurred) {
let errorMessage;
if (networkErrorOccurred) {
errorMessage = 'Error: Network error';
} else if (serverErrorOccurred) {
errorMessage = 'Error: Server error';
} else {
// Assert that the above code is correct.
throw new Error('networkErrorOccurred and serverErrorOccurred are both false');
}
alert(errorMessage);
}
});