Home > Article > Web Front-end > Execute script when user navigates on HTML page?
Execute script when user navigates on HTML page?
- WBOYforward
- 2023-08-20 13:13:06847browse
The task we need to perform in this article is executing a script when a user navigates to a page in HTML.
We can do the above task (executing a script when a user navigates to a page in HTML) by using "onpageshow Event". Before we jump into the examples let's look into the definition and usage of onpageshow event in HTML.
HTML onpageshow event
The onpageshow event in HTML occurs when a user navigates to a webpage. This event occurs every time the page is loaded.
grammar
The following is the syntax of the onpageshow event in HTML -
<element onpageshow = "myScript">
The following is an example of how we use the onpageshow event in HTML, when the user navigates to a page in HTML.
Example 1
In the example,
When the user navigates to a page in HTML, we use the onpageshow event.
We wrote an alert() method inside the function. So whenever the user tries to navigate to a page, the onpageshow event will be fired.
<!DOCTYPE html>
<html>
<head>
<title>Execute a script when a user navigates to a page in HTML?</title>
</head>
<body onpageshow="navigate()">
<h2>Execute a script when a user navigates to a page in HTML?</h2>
<p><b>Note:</b> The <strong>"onpageshow"</strong> event in HTML will not supported in Internet Explorer 10 and before versions.</p>
<script>
function navigate() {
alert("Welcome to the page!");
}
</script>
</body>
</html>
As we can see in the output; when the user tries to navigate to a page an alert will be displayed on the window.
The Chinese translation ofExample 2
is:Example 2
In the example below,
When the user navigates to a page in HTML, we use the onpageshow event.
We wrote a print statement inside the function. So whenever the user tries to navigate to a page, the onpageshow event will be fired.
<!DOCTYPE html>
<html>
<head>
<title>Execute a script when a user navigates to a page in HTML?</title>
</head>
<body onpageshow="navigate()">
<h2>Execute a script when a user navigates to a page in HTML?</h2>
<p><b>Note:</b> The <strong>"onpageshow"</strong> event in HTML will not supported in Internet Explorer 10 and before versions.</p>
<h2 id="heading"> </h2>
<script>
function navigate() {
document.getElementById("heading").innerHTML = "Welcome to the page!";
}
</script>
</body>
</html>
As we can see in the output when the user tries to navigate to a page the print statement will be executed.
The Chinese translation ofExample 3
is:Example 3
In the example below,
When the user navigates to a page in HTML, we use the onpageshow event.
We wrote a print statement inside the function. So whenever the user tries to navigate to a page, the onpageshow event will be fired.
In the below code; we have written "window.onpageshow", here window interface represents a window containing a DOM document.
<!DOCTYPE html>
<html>
<head>
<title>Execute a script when a user navigates to a page in HTML?</title>
</head>
<body>
<h2>Execute a script when a user navigates to a page in HTML?</h2>
<h3 id="para"></h3>
<script>
function Navigate() {
document.getElementById("para").innerHTML = "Welcome to the page!";
}
window.onpageshow = Navigate;
</script>
</body>
</html>
As we can see in the output when the user tries to navigate to a page the print statement will be executed.
The above is the detailed content of Execute script when user navigates on HTML page?. For more information, please follow other related articles on the PHP Chinese website!