页面跳转的两种实现方法

★利用<meta>实现

参考代码

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta http-equiv="refresh" content="10;url=http://www.baidu.com">
    6. 

  6.     <!--http-equiv实现页面与http挂钩，content内容设置延时的时间和要跳转的目的链接地址-->
    7. 

  7.     <title>JavaScriptDialog</title>
    8. 

    9. 

  9. </head>
    10. 

  10. <body style="text-align: center;">
    11. 

  11. <h2>meta实现页面跳转</h2>
    12. 

  12. <hr/>
    13. 

  13. <span>实现代码</span>
    14. 

  14. <mark>&lt;meta http-equiv="refresh" content="10;url=http://www.baidu.com"&gt;</mark>
    15. 

  15. <script>
    16. 

    17. 

    18. 

  18. </script>
    19. 

  19. </body>
    20. 

  20. </html>
    21.

★利用定时器实现

参考代码

    

  1. <h2>定时器实现页面跳转</h2>
    2. 

  2. <small>结合location的replace方法实现不能返回的跳转</small>
    3. 

  3. <hr/>
    4. 

  4. <b>
    5. 

  5.     <mark>10秒后跳转到百度首页</mark>
    6. 

  6. </b>
    7. 

  7. <br/>
    8. 

  8. <time id="ShowTime"></time>
    9. 

  9. <script>
    10. 

  10.     setTimeout("window.location.replace(‘http://www.baidu.com‘)", 10000);
    11. 

  11.     //注意此处使用replace方法，因此当跳转到目的链接之后是通过浏览历史或者前进、后退按钮返回
    12. 

  12.     //此处直接写执行的代码，因此需要用冒号括起来
    13. 

  13.     //*延时10s后跳转到baidu
    14. 

  14.     setInterval(function test() {
    15. 

  15.         var time = document.getElementById(‘ShowTime‘);
    16. 

  16.         time.innerText = new Date().toLocaleTimeString();
    17. 

  17.     }, 1000);
    18. 

  18.     //显示当前时间
    19. 

  19.     //执行代码写成函数，无需用冒号括起来，并且更规范些
    20. 

  20. </script>
    21.

来自为知笔记(Wiz)

时间： 2024-12-29 01:43:09

页面跳转的两种实现方法的相关文章

跳转的两种实现方法setInterval和setTimeout

setInterval方法: <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>出错啦~~~</title> <link href="css/login1.css" mce_href="css/login1.css" rel="

web项目中实现页面跳转的两种方式

<a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> 跳转在网页本身,URL 改变 java web项目中实现页面跳转的主要方式有两种:第一种,<% response.sendRedirect("index.jsp");%>第二种<jsp:forward page="index.jsp"/>我做

js实现页面跳转的两种方式

CreateTime--2017年8月24日08:13:52Author:Marydon 方式一: window.location.href = url 说明:我们常用来在js中实现页面跳转的方法,使用get方式发送请求,传参有限 更多介绍,见文章:js操作当前窗口 方式二: 通过POST请求实现页面跳转 /** * 发送POST请求跳转到指定页面 * @param URL * 跳转路径 * @param PARAMS * 参数:格式-JSON对象 */ function httpPost(UR

Vue路由实现页面跳转的两种方式（router-link和JS）

Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用 1.通过 <router-link> 实现 <router-link> 组件用于设置一个导航链接,切换不同 HTML 内容 使用方法: 简单写法 <router-link to="demo2">demo2</router-link> 使用 v-bind 的写法 <router-link :to="'demo2'">de

vue 页面跳转的两种方式

1,标签跳转     <router-link to='two'><button>点我到第二个页面</button></router-link> 2,点击事件跳转    html : <button @click="hreftwo" class="test-one">点我到第二个页面</button>   js : methods:{ //跳转页面 hreftwo(){ this.$router

HTML 页面跳转的五种方法

H方法TML 页面跳转的五种方法 下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件.1) html的实现 <head><!-- 以下方式只是刷新不跳转到其他页面 --><meta http-equiv="refresh" content="10"><!-- 以下方式定时转到其他页面 --><meta http-equiv="

Jsp页面跳转和js控制页面跳转的几种方法

Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servlet或者是JSP到另外的一个Servlet.JSP 或普通HTML文件,也即你的form提交至a.jsp,在a.jsp用到了forward()重定向至b.jsp,此时form提交的所有信息在 b.jsp都可以获得,参数自动传递. 但forward()无法重定向至有frame的jsp文件,可以重定向至有

HTML中button标签点击实现页面跳转的三种方法

方法1:使用onclick事件12<input type="button" value="按钮"onclick="javascrtpt:window.location.href='http://www.9252.com/'" /> 或者直接使用button标签1<button onclick="window.location.href = 'https://www.9252.com/'">儿童</

基于Apache+Tomcat负载均衡的两种实现方法

Apache+Tomcat实现负载均衡的两种实现方法 如果我们将工作在不同平台的apache能够实现彼此间的高效通信,因此它需要一种底层机制来实现--叫做apr Apr的主要目的就是为了其能够让apache工作在不同的平台上,但在linux上安装apache的时候通常都是默认安装的 [[email protected] ~]#rpm -qi aprName                 :apr                                        Relocation