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

GDB debugging MySQL actual combat source code compilation and installation

Download source code git clone https://github.com...

How to use vite to build vue3 application

1. Installation Tip: There is currently no offici...

How to implement remote automatic backup of MongoDB in Linux

Preface After reading the previous article about ...

List rendering instructions for efficient development of Vue front-end

v-for directive Speaking of lists, we have to men...

Chrome 4.0 supports GreaseMonkey scripts

GreaseMokey (Chinese people call it Grease Monkey...

Complete step-by-step record of MySQL 8.0.26 installation and uninstallation

Table of contents Preface 1. Installation 1. Down...

Tutorial on logging into MySQL after installing Mysql 5.7.17

The installation of mysql-5.7.17 is introduced be...

SSM projects are frequently deployed as war packages, using tomcat and maven to implement hot deployment configuration

background As we all know, after we develop a Jav...

MySQL full-text fuzzy search MATCH AGAINST method example

MySQL 4.x and above provide full-text search supp...

How to uninstall MySQL 5.7.19 under Linux

1. Find out whether MySQL was installed before Co...

WeChat applet implements jigsaw puzzle game

This article shares the specific code for impleme...

A question about border-radius value setting

Problem Record Today I was going to complete a sm...

Detailed explanation of 8 ways to pass parameters in Vue routing components

When we develop a single-page application, someti...

Adobe Brackets simple use graphic tutorial

Adobe Brackets is an open source, simple and powe...

Application scenarios and design methods of MySQL table and database sharding

Many friends have asked in forums and message are...