Five ways to achieve automatic page jump in HTML

Five ways to achieve automatic page jump in HTML

In the previous article, we introduced three common methods for HTML pages to automatically jump after 3 seconds. This article will continue to introduce you to the relevant knowledge about HTML page jump. Let’s learn together.
Five examples are listed below to explain in detail. The main function of these examples is: after 5 seconds, automatically jump to the hello.html file in the same directory (modify it according to your needs).

1) Implementation of HTML


Copy code
The code is as follows:

<head>
<meta http-equiv="refresh" content="5;url=hello.html">
</head>

Pros: Simple

Disadvantage: Cannot be used in Struts Tiles

2) Implementation of JavaScript


Copy code
The code is as follows:

<mce:script language="javascript" type="text/javascript"><!--
setTimeout("javascript:location.href='http://liting6680.blog.163.com/blog/hello.html'", 5000);
// --></mce:script>

Advantages: Flexible, can be combined with more other functions

Disadvantages: Affected by different browsers

3) Combined with the countdown javascript implementation (IE)


Copy code
The code is as follows:

<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
var second = totalSecond.innerText;
setInterval("redirect()", 1000);
function redirect(){
totalSecond.innerText=--second;
if(second<0) location.href='http://liting6680.blog.163.com/blog/hello.html';
}
// --></mce:script>

Advantages: More humane

Disadvantages: Firefox does not support (Firefox does not support the innerText attribute of span, div, etc.)

3) Combined with the countdown javascript implementation (firefox)


Copy code
The code is as follows:

<mce:script language="javascript" type="text/javascript"><!--
var second = document.getElementById('totalSecond').textContent;
setInterval("redirect()", 1000);
function redirect()
{
document.getElementById('totalSecond').textContent = --second;
if (second < 0) location.href='http://liting6680.blog.163.com/blog/hello.html';
}
// --></mce:script>

4) Solve the problem that Firefox does not support innerText


Copy code
The code is as follows:

<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('totalSecond').innerText = "my text innerText";
} else{
document.getElementById('totalSecond').textContent = "my text textContent";
}
// --></mce:script>

5) Integration of 3) and 3')


Copy code
The code is as follows:

<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
var second = document.getElementById('totalSecond').textContent;
if (navigator.appName.indexOf("Explorer") > -1)
{
second = document.getElementById('totalSecond').innerText;
} else
{
second = document.getElementById('totalSecond').textContent;
}
setInterval("redirect()", 1000);
function redirect()
{
if (second < 0)
{
location.href='http://liting6680.blog.163.com/blog/hello.html';
} else
{
if (navigator.appName.indexOf("Explorer") > -1)
{
document.getElementById('totalSecond').innerText = second--;
} else
{
document.getElementById('totalSecond').textContent = second--;
}
}
}
// --></mce:script>

The above five examples introduce five methods of using HTML to achieve automatic page jump. I hope you like them.

<<:  Analysis and solution of the cause of web page style loss caused by browser automatic form filling

>>:  Solve the problem of MySql8.0 checking transaction isolation level error

Recommend

Vue implements infinite loading waterfall flow

This article example shares the specific code of ...

Implementation of Nginx domain name forwarding

Introduction to Nginx Nginx ("engine x"...

JavaScript to implement slider verification code

This article shares the specific code of JavaScri...

Implementation steps for setting up the React+Ant Design development environment

Basics 1. Use scaffolding to create a project and...

How to solve the problem of MySQL query character set mismatch

Find the problem I recently encountered a problem...

Introduction to HTML DOM_PowerNode Java Academy

What is DOM? With JavaScript, you can reconstruct...

MYSQL slow query and log example explanation

1. Introduction By enabling the slow query log, M...

MySQL 8.0.2 offline installation and configuration method graphic tutorial

The offline installation method of MySQL_8.0.2 is...

IE6 BUG and fix is ​​a preventive strategy

Original article: Ultimate IE6 Cheatsheet: How To...

JavaScript implements the protocol example in which the user must check the box

In js, set the user to read a certain agreement b...

Analysis of the difference between Mysql InnoDB and MyISAM

MySQL supports many types of tables (i.e. storage...

Detailed introduction to logs in Linux system

Table of contents 1. Log related services 2. Comm...

Using Nginx to implement grayscale release

Grayscale release refers to a release method that...

A brief discussion on the implementation principle of Vue slot

Table of contents 1. Sample code 2. See the essen...

Detailed explanation of how to synchronize data from MySQL to Elasticsearch

Table of contents 1. Synchronization Principle 2....