This code works perfectly with Firefox but not with Chrome.
I'm using a webserver with chrome so the .load() works fine.
$(function(){
$("#header").load("header.html");
});
$(document).ready(function(){
$('#notif').text("5");
}
When I debug using chrome, the code executes fine but nothing is inserted in <span id="notif"></span>.
The <span id="notif"></span> that is in my header.html is loaded dynamically with JS.
Again, it works fine in firefox but not in Chrome.
the load is asynchronous, so the document will be ready (and have triggered) well before the end of the load.
In short $('#notif') does not exist when document is ready, because it is not loaded yet.
$(function(){
$("#header").load("header.html",function(){
$('#notif').text('5');
});
});
not the second parameter, the anonymous function, will start after the successful completion of the load.
the difference between firefox and chrome can be related to the speed of downloading, but I'm not 100% sure. More testing is needed.
sometimes (especially IE) debugging the code via a breakpoint, may cause enough delay to the document.ready trigger to have finished loading. So no "faults" are discovered.
Related
I've noticed that my events trigger differently in Chrome vs. Safari. Firefox (largely) acts the same as Chrome. However I've somehow stumbled across the fact that Chrome and Safari seem to load or execute JS at different times. For example, code that works 100% on Chrome will not work in Safari because Chrome calculates the height of a div (for example) after the page is loaded and Safari does it before. Or, at least I think that's the issue.
...
$(window).on('load', function() {
$('.menu-feature-wrapper').each(function(){
menuHeight = $(this).outerHeight();
$(this).find('.col-md-4').css('height', menuHeight);
});
});
...
In this example snippet - with about 200 additional lines of JS above and below, I had to wrap the working Chrome code (which is all wrapped in $(document).ready of course) with $(window).on('load'... to make it calculate the heights properly in Safari, even though it was acting as expected in Chrome.
My question is this: what's the deal with javascript between Chrome and Safari? Should I just be aware that certain events need to be executed after the entirety of the page loads and that Safari will expect that? Do they actually load JS at different times, regardless of where I include them in the DOM (header vs. footer)? Further, is there some place that explains this? I may just be bad at the Google, but I found very sparse information on how JavaScript is treated between Safari and Chrome, and all other browsers for that fact.
Thanks in advance for pointers/links!
I have a javascript code which I have written inside
$(document).ready(function()
and it runs fine on all browsers except IE. When I use
$(window).load(function() {
it runs fine on IE too but now as the code gets executed once each and every element, images etc have loaded completely the overall load time or turn around time has increased by a second or more.
How can I use window.load instead of document.ready only when browser is IE ?
Note:: As the code is about 500 lines I just cannot use if else condition.
Using Head.js (0.9) and verifying the loading of scripts from IE9, the Network pane of IE9 developer shows that the javascripts are loaded twice.
First time, the script is loaded with HTTP result code 200, thereafter the same script is reloaded with result code 304 (not modified).
However, the script pane and the script block drop down displays the scripts as being loaded twice. This in turn makes one of the scripts (sIFR.js) resetting its global sIFR object.
I'm suspecting the double-loading is causing this.
Note: Chrome and Firefox both work as expected.
Anyone else having seen this odd behaviour?
I have a page being loaded in an <iframe>.
Inside the <iframe>, I have a function that patiently waits for the page to load using jQuery's $(window).load() event which is supposed to wait until ALL page content (images, javascript, css, etc.) is loaded before firing.
The function then calls back to the page loading the <iframe> using postMessage to send the height of the content in the <iframe> back.
I have tested the functionality in IE7, IE8, Firefox 2, Firefox 3, Opera, and Chrome and everything works fine. When I try to load the page in Safari, the function makes its call back before images are loaded...thus giving me the wrong page height.
Does anybody out there know how to force Safari to wait for images to be loaded before calling a function (jQuery solutions are preferable in this case)?
Checking for an offset forces safari for finish loading/layout out the content, it blocks javascript until the return completes. You can use it like this:
$(window).load(function() {
var block = document.body.offsetWidth;
//Rest of code...
});
I have a piece of code that can be simplified to this:
var s='' ;
s += "<"+"script type=\"text/javascript\" src=\"http://somehost.com/scripts/FooFunctions.js\">\n";
s += "<"+"/script>" ;
s += "<"+"script type=\"text/javascript\">\n";
s += "FooFunction(42, 'i love cats');\n";
s += "<"+"/script>" ;
document.write(s) ;
In all browsers except IE, this executes as you'd expect - functions from somehost.com/scripts/FooFunctions.js work as expected.
In Internet Explorer, this fails.
Googling this seems difficult. I've found the occasional post witht the same problem, but no solution.
(There is a valid reason that the external file needs to be included from javascript this way, and that the pgae can not have a <script src="http://somehost.com/scripts/FooFunctions.js"> inserted in it.)
To be clear, the question is: How can I make the above piece of code function the same in Internet Explorer as it does in e.g. FireFox?
Try this, it works in IE
function addJsFile(jsFileLocation){
var script=document.createElement('script');
script.type='text/javascript';
script.src=jsFileLocation;
document.getElementsByTagName("head")[0].appendChild(script);
}
addJsFile("http://code.jquery.com/jquery-latest.pack.js");
setTimeout(function(){alert(jQuery);},1000);
It looks like IE is calling FooFunction before the script is loaded. You can test this by using setTimeout("FooFunction(42, 'i love cats')", 1000); assuming one second is enough time for the script to load, this call will succeed.
If you can't use a framework like jQuery to load the scripts, which will provide you with a callback when the script loads, you might be able to hack your own with setInterval, checking for FooFunction
As soon as the document.write call is complete it will run the function in the second script tag. Regardless of whether or not the external script has loaded yet. This should not just be an IE problem but should effect all browsers. Are you sure that it is not effecting other browsers as they have the external script cached? What happens when you clear your cache and try again in another browser?
Anyways, in an ideal world you should just be able to use .onload on the script tag but I'm 99% sure that there is problems with onload not firing on script tags in IE6 so we need to resort to using onload on the window element instead. This will event will not fire until all scripts have been downloaded including external js files like above.