I want to create a function that will execute when my page loads. Normally I would put this function in the body's onload attribute. I'm a little unsure how to do that in JSFiddle. I have this in my script ...
window.onload=function(){ alert('hi'); }
but nothing happens when I load my page -- https://jsfiddle.net/xx77tzn3/3/ . How do I execute a function in JSFiddle when the body loads?
Related
I've checked many other answers on StackOverflow but none of them work for some reason.
I'm trying to use something simple like
window.onload = function() {
sleep(5000)
clickButton()
}
But as far as I can tell the button on a page I want clicked loads AFTER page load. So window.onload doesn't work at all. That's why I tried to use a custom sleep function to force the code to run after-after page load but nope. Code "sleeps" by preventing page from fully loading, then runs clickButton(), then the page loads. Useless.
I know my actual button clicking code works in practice because I just fed into the browser console line by line and it worked fine. But the button I'm targeting loads after my code is executed!
I have also tried these which also do not work:
window.addEventListener('load', function () {
clickButton()
})
setTimeout(clickButton(), 5000)
setInterval(clickButton(), 5000)
...
Also I'm using:
document.querySelector("[data-a-target='button-name']");
instead of:
document.getElementById("button-name");
since this button does not have an id.
...
Also I have never used jquery before if that is the answer.
...
How on earth do I get js to click a button immediately as soon as it loads?
The order in which you write your code plays an important role here.
Firstly, put the script tag at the very bottom of the body element of your html page. That forces the browser to have already read through the entire html page before getting to the script tag with your Javascript.
Secondly, I assume you have an event listener for a click on the button. Write the event listener before you let the button be clicked.
For example, I wrote this little code to test my assumption out:
button.addEventListener('click', function () {
console.log('Clicked');
});
button.click();
This should hopefully work for you too. Good luck
I want to show an popup when an HTML start loading and dismiss that popup when document loaded fully. Is there any event in JQuery to catch both events?
You don't need a jQuery for that. In document's head section if you insert a script like this:
<script>
showPopup();
</script>
.. it will be executed before HTML has loaded. And if you execute script like this:
<script>
window.onload = function() {
hidePopup();
}
</script>
.. it will be executed after the page has loaded
How would I execute some javascript upon arriving at a new page? For example, click a link a new page loads and then some script is executed on that new page?
EDIT: The problem is that I only want the js to execute when you're arriving there from a certain page so dom ready code on that destination page would fire any time that page is loaded.
Just define your function at the end of your page body or in your <head>:
<script> myFunction(){
//some code here
}
</script>
And the set the onload on your page body to run that function:
<body onload="myFunction()">
This is the Javascript method. For jQuery, use $(document).ready().
with Jquery:
$(document).ready(function(){
//The code here is executed after the page is loaded
})
with Javascript
document.addEventListener("DOMContentLoaded", function(event) {
//The code here is executed after the page is loaded
});
In my main window main.htm I have a div button that loads another htm file into a large div when clicked. I use .load() to achieve this:
$('#mainpanel').load("search.htm");
There is a function in "search.htm" called test() which only consists of alert("hi"); and I want this to load when search.htm is loaded into the div. I used the body onload tag and window.onload = test; and even $( document ).ready() but nothing works. It only works if I access search.htm on its own, but if I access it through main.htm it does't alert "hi". Is there a way to use .load() to load the page and a function? or is there a way to get the function the onload when I select the div that loads the page?
The onload / document ready will only fire once (when the parent document is loaded)
Either add a
<script type="text/javascript">
test();
</script>
to the end of the search.htm (so it's executed after everything else in the page has been parsed) or call test(); from the parent page after the load completes (via a callback)...
$('#mainpanel').load("search.htm", function(){
test();
});
It depends which page you want to be responsible for executing the function. In the latter case, the parent page needs to know the name of the function in search which may or may not fit your design.
Using window.onload or $( document ).ready() doesn't make sense because the document is most likely already loaded when you run that function.
You can pass a callback to .load and access the function inside there. The callback is executed when the other page is loaded:
$('#mainpanel').load("search.htm", function() {
test();
});
Of course test must be in global scope for this to work.
As always, it's advisable to the read the documentation of the methods you are using: https://api.jquery.com/load/.
I have a script that will be inserted into an unknown page at an unknown time. Is it possible to tell from this script if window.onload has fired yet?
I have no control over the host page. I can't add any markup or scripts to it. All I know is that my script will be inserted into the page at some point. It could be before window.onload or after; and I need to detect which side of that event I'm on.
Updated Answer:
Look at this site. He uses a trick by seeing if the last element of document.getElementsByTagName("*") is defined or not. It seems to work in Opera and IE.
Original Answer:
You can't check, but you can do:
window.setTimeout(function () {
// do your stuff
}, 0);
That will do your stuff definitely after the page has loaded.
jQuery's ready() will queue a function to be fired when the document is loaded, or fire immediately if the document is already loaded:
$(document).ready(function() {
//your code here
});
Just be sure jQuery is included before your script block. If you can't include any script resources directly, you can always copy the body of jQuery-min in your script itself.