I have a javascript function that I want to call when the page loads. So I called the function using the body onLoad tag -
<body onload="function();" >
This works, but on the Safari browser, the application continues to show the loading symbol even after the function has finished execution. When I call the same function using a button click on the page, Safari behaves nicely and doesn't show the loading symbol after the function's execution.
I tested on Chrome and Firefox and I don't see this problem. I've also tried other ways of calling it on load -
$(document).ready(function() {
});
$(document).onload(function() {
});
But the problem persists on Safari. Any ideas ?
Related
Loading a PDF in an <object> tag, I want to show an indicator while the document is being loaded instead of just an empty element, so I positioned a Load Panel over the <object>. I added a function to hide the panel:
function documentLoaded() {
// Code to hide panel here.
}
And set it to fire in the onload event of the <object> tag:
<object type="application/pdf" data="/documents/sample.pdf" onload="documentLoaded();"></object>
This is working exactly how I want it to in Firefox and in Edge, but when I tested it in Chrome the Load Panel never went away. When I debugged it I saw that the documentLoaded() function was never called at any point.
Is there another way to get this to work with Chrome, or another way completely to call a JS function once the PDF is ready?
document.querySelector('#load_panel').onload=documentLoaded()
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.
I have a small code in my page with
<script type="text/javascript">
function doPost() {
document.forms["form"].submit();
}
function Func1Delay()
{
setTimeout("doPost()", 0);
}
....
<body onload="Func1Delay()">
I have this error in the console saying
Uncaught TypeError: Cannot call method 'create' of undefined
and on the right, it's due to the chrome extension MeasureIt. When I disable it, my script works. Is there a workaround for this problem?
The short answer is YES.
But the complete answer is NO, it's not Chrome, but some extension who interfere with your code.
For example:
1) A content script can add a listener and use stopPropagation. In this case your code won't receive that event. I can image a more specific scenario where the content script fails and therefore prevents other listeners to execute.
2) A content script can mess with your page's elements. It can remove some, and add its owm. What would happen if the extension add a SCRIPT element with a var or function named exactly the same that one of yours?
We cannot be sure about how "well" the extension's code is written.
By the way, there is a lot of Chrome's extensions that interfere with pages. Some months ago Skype extension for Chrome was found guilty of interfere and destabilize web pages and video playback in that browser.
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...
});
EDIT: as this problem is now "solved" to the point of working, I am looking to have the information on why. For the fix, see my comment below.
I have an web application which repeatedly downloads wav files dynamically (after a timeout or as instructed by the user) into an iframe in order to trigger the a default audio player to play them. The application targets only FF 2 or 3. In order to determine when the file is downloaded completely, I am hoping to use the window.onload handler for the iframe. Based on this stackoverflow.com answer I am creating a new iframe each time. As long as firebug is enabled on the browser using the application, everything works great. Without firebug, the onload never fires. The version of firebug is 1.3.1, while I've tested Firefox 2.0.0.19 and 3.0.7. Any ideas how I can get the onload from the iframe to reliably trigger when the wav file has downloaded? Or is there another way to signal the completion of the download? Here's the pertinent code:
HTML (hidden's only attribute is display:none;):
<div id="audioContainer" class="hidden">
</div>
JavaScript (could also use jQuery, but innerHTML is faster than html() from what I've read):
waitingForFile = true; // (declared at the beginning of closure)
$("#loading").removeClass("hidden");
var content = "<iframe id='audioPlayer' name='audioPlayer' src='" +
/path/to/file.wav + "' onload='notifyLoaded()'></iframe>";
document.getElementById("audioContainer").innerHTML = content;
And the content of notifyLoaded:
function notifyLoaded() {
waitingForFile = false; // (declared at beginning of the closure)
$("#loading").addClass("hidden");
}
I have also tried creating the iframe via document.createElement, but I found the same behavior. The onload triggered each time with firebug enabled and never without it.
EDIT:
Fixed the information on how the iframe is being declared and added the callback function code. No, no console.log calls here.
Old question but for future reference:
As far as my experience onLoad is not called for file downloads. A way to solve it is to use cookies like they do here http://gruffcode.com/2010/10/28/detecting-the-file-download-dialog-in-the-browser/
Here's an example that works for me, without Firebug open (tested in FF 3.6.2 Mac): http://www.jsfiddle.net/Kukry/
I'm using the jQuery .load() event instead of onload.
var iframe = $("<iframe/>").load(function () {
alert("loaded");
}).attr({
src: "http://code.jquery.com/jquery-1.4.2.min.js"
}).appendTo($("#thediv"));
Note that I'm loading a JavaScript file, not an audio file, so that might make a difference.
Maybe you call some Firebug internal function, like console.log(), somewhere? In that case, Firefox will threw an exception which can stop the execution if Firebug is not active.