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
});
Related
I have a modal which automatically opens up after certain time period. The code to open the modal is written in a js file.
- xyz.js
var timehandle
//setTimeout function
timehandle=window.setTimeout("func()",x);
//function to open the modal
func(){
$('#modal').show();
}
i am clearing the timer from a jsp in order to avoid modal being opened.
- abc.jsp
<script>
head.ready(function() {
$(document).ready(function () {
window.clearTimeout(timehandle);
});
});
</script>
however, document.ready in the jsp is called earlier than the function to load the modal based on setTimeout. Can anyone tell me how do I make sure that the clearTimeout is called after the js file has been executed?
You should use <body onload="myFunction()"> since what you really want it to execute your js code after the page has loaded.
Execute a JavaScript immediately after a page has been loaded
Documentation
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?
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
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 want to change between two pages in html with javascript, but when I change with window.location, the code that is after this sentence continues executing.
So when I do, for example, a call to getElementById() it doesn't recognize the element because the page is still loading.
function myFun(){
// ...
window.location = 'page.html';
// ... wait until page.html is loaded
}
How can I wait until the page is loaded to avoid this problem?
When you do
window.location = 'page.html';
you replace the page in the browser, the one containing the code of myFun, by a new page. There is no way for the code following this instruction to be executed.
If you want to execute it, and only after that change page (but I don't see the point), then you might do
document.onload = function(){ window.location = 'page.html'; };
You can use jQuery document.ready or you can create custom bind like this one. In case you use jQuery.
$(document).ready(function() {
window.location = 'page.html';
});
You can't execute code in your own page after doing window.location = 'page.html';. Your page will be replaced by the new page and the code in the current page will no longer be there.
The only ways to execute some code after page.html is loaded into the current window are as follows:
Load it in an iframe or another window and monitor for when the iframe or window has finished loading. In this way, your current code stays around and is not replaced.
Have some code in page.html that monitors when it finishes loading and trigger your desired action from there.