I am a bit confused here. I thought that the function specified in window.onload did not execute before the page was loaded. Nervertheless, I get an error in the below code (heres the jsfiddle version):
<script>
function updateImage(url){
document.getElementById("foo").src = url;
}
window.onload = updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
</script>
<img id="foo" alt="" src="http://dummyimage.com/100x100/000/fff.png&text=bar" />
It gives me:
Error: document.getElementById("foo") is null
When moving the image above the script all works well.
window.onload expects to be a function - which it will call when the page is loaded. But what you've assigned to it is not a function. You assigned
updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
which immediately executes the updateImage function, and since you don't have a return statement in the body of updateImage, the return value is undefined. Therefore, at the end, window.onload has the value undefined.
A solution would be to change that bit of code to:
window.onload = function(){
updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
}
This will cause it to call the function when the window has been loaded and do what you'd expect.
You can use trigger that will check is element loaded.
<script>
function updateImage(url){
document.getElementById("foo").src = url;
}
function initOnLoad(sElementName) {
var oElement = (sElementName == "body") ? document[sElementName] : document.getElementById(sElementName);
if(oElement != null && typeof(oElement) != "undefined") {
updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
}
else {
setTimeout(function() {
initOnLoad(sElementName);
}, 0);
}
}
initOnLoad('body');
</script>
<img id="foo" alt="" src="http://dummyimage.com/100x100/000/fff.png&text=bar" />
You have an error in your code.
window.onload = updateImage("...");
You are not assigning a function handler to the window onload. You are assigning the RESULT of the updateImage function. Which is executed immediately before image is loaded or even added to the DOM. To assign function handler you need:
window.onload = updateImage;
or
window.onload = function(){
updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
}
or by using jQuery
$(document).ready(function(){
updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
});
Related
I'm trying to write a script that simulates a click on a certain button on page. I tried using window.onload but it doesn't work. It seems to me that the problem is that when my script starts executing, the element I want to interact with doesn't exist yet. How can I do that?
Here is what I tried:
window.onload = function() {
document.getElementsByTagName('story')[0].onload = function() {
document.getElementsByTagName('story')[0].click();
};
};
Set click() in a recursive function that uses setTimeout()
window.onload = function() {
function findButton(){
setTimeout(function(){
let btn = document.getElementsByTagName('story')[0]
if(!btn){
findButton()
}else{
btn.click()
}
}, 300)
}
findButton()
}
I have written a js function in aspx like below
window.onload = function () {
document.getElementById('grid-overlay').style.display = 'block';
}
Now I want to call this function in code behind. I tried like below:-
if (dtmkey.Rows.Count > 0)
{
HidMode.Value = "M";
HidMKey.Value = dtmkey.Rows[0]["mkey"].ToString();
var scriptSource = "function onload() { alert(""); };\n";
ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "HelpScript", scriptSource, true); // Not working
}
kindly suggest what is wrong
window.onload is an event handler for the load event of a window & the attached function is function that will be called on load event.
Also it is not clear what you are trying to do at this point
// I ran this variable in console, it threw unexpected syntax
var scriptSource = "function onload() { alert(""); };\n"; //
Are you trying to call a function expression here?
you can make this changes and test it
function onload(){ // This is a function expression and onload not same as window.onload
document.getElementById('grid-overlay').style.display = 'block';
}
window.onload = function () {
onload() // call onload function here once window has finished loading
}
If you are looking for onload here you can replace the below snippet
var scriptSource = "function onload() { alert(""); };\n"; with `onload();`
My Google map only shows if function a is document.ready. However, then the function dothis() is called before the user clicks a button which calls function getMyID(inputId).
How do I run my script when the document is ready and a button is clicked?
Here's my code:
function dothis(inputId)
{
if (inputId == "1"){
dlat=30.745271;
dlng=0.578793;
getLocation();
}
else if (inputId == "2"){
dlat=40.836671;
dlng=0.578793;
currentloc();
}
}
$(document).ready(function a() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?key=ALsbSyEQvVel4MCu9xMBvD_92qAuqrFrcnos0dc&libraries=geometry,places&sensor=true&callback=dothis';;
document.body.appendChild(script);
};
$(document).ready(function() { a(); })
Well, why not call a() like
$(document).ready(function() { a(); })
Or if you don't use jquery, then
window.onload = a();
OnLoad works a bit differently though: it doesn't wait for the resources to load (e.g. images) to fire the event. jQuery document-ready event will wait for all the resources to load and then fires the event.
If you want to use jQuery, try it this way :
function dothis() {
...
}
$(document).ready(function() {
$('#MyButton').click(dothis);
}
This way, the button will be associated to the dothis function which can be called once the document is ready ;)
what you want to do is to call window.onload and initialize you button click handler there
eg
function dothis() {
// Do this
}
function getInput(input) {
// Get input
}
function init() {
document.getElementById('mybutton').onclick = getInput
}
window.onload = init
Im using this code to fire a function right after the page is loaded:
function loadpapi(){
alert("Hello World!");
}
function pctaddLoadEvent(func) {
var oldonload = document.onload;
if (typeof document.onload != 'function') {
document.onload = func;
} else {
document.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
pctaddLoadEvent(loadpapi());
But is starting before the page loads, you can try it here: http://jsfiddle.net/KuTxh/
pctaddLoadEvent(loadpapi());
This code calls loadpapi (just like any other function call) and passes the result to pctaddLoadEvent.
You want to pass the function without calling it.
I changed the event from document.onload to window.onload: see a discussion here.
This document.onload vs window.onload is a complicated subject. It is likely the document.onload event isn't fired by your browser at all. (Or, as one deals with the window and the other with DOM tree, it is possible that the document.onload event has already fired when your javascript function took action - more testing can confirm that.)
Also, the function passed as parameter goes without the (), as you want to pass the function itself, not its returning value.
function loadpapi(){
alert("Hello World!");
}
function pctaddLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
pctaddLoadEvent(loadpapi);
Check demo fiddle: http://jsfiddle.net/st4kQ/
My goal is to have a parent page change the src of an iframe from blank to its proper url (as to utilize an onload handler in the iframe at a given point, but that's beside the point) and then manipulate the iframe's contents. However, javascript seems oblivious to any elements of an iframe that aren't on its src when the DOM loads. Is there any way around this?
The setTimeouts are intended to allow the DOM and iframe to load.
edit:fixed some stuff.
Here's the containing page:
<html><head>
<script type="text/javascript">
var done = false;
var theIframe;
window.onload = function () {
setTimeout('stuff()', 2000);
clearTimeout('stuff()');
}
function stuff() {
if (!done) {
theIframe = window.myiframe;
theIframe.src = 'http://localhost/TestStuff/redirectIframe.jsp';
done = true;
stuff();
} else {
theIframe.setMe = true;
}
}
</script>
</head>
<body>
<iframe src="" width="500" height="500" id="myiframe" name="myiframe">
</iframe>
</body>
And here's the iframe:
<html>
<head>
<script type="text/javascript">
var setMe = false;
window.onload = setInterval('checker()', 1000);
function checker() {
alert('hi');
if (setMe) {
window.onload = null;
top.location = 'http://www.google.com';
alert('foundit');
} else alert('a');
}
</script>
</head>
<body></body>
</html>
Any ideas?
In this piece of code:
theIframe.src = ...;
stuff();
you're calling stuff() immediately, contrary to what you have described, so in fact you're not allowing any time for the page to load. Maybe you're confused about how setTimeout works: it just schedules a single execution after the specified time, it doesn't automatically delay all calls to a function.
Also, you can use clearTimeout only with a previous ID returned by setTimeout, not with code as you have now.
Try something like this:
window.onload = function() {
loadFrame();
}
function loadFrame() {
theIframe = ...;
theIframe.src = ...;
setTimeout(setSomething, 2000);
}
function setSomething() {
theIframe.setMe = true;
}