页面跳转的两种实现方法

Posted Jener_Yan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面跳转的两种实现方法相关的知识，希望对你有一定的参考价值。

★利用<meta>实现

参考代码
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <metahttp-equiv="refresh"content="10;url=http://www.baidu.com">
  6. <!--http-equiv实现页面与http挂钩，content内容设置延时的时间和要跳转的目的链接地址-->
  7. <title>javascriptDialog</title>
  9. </head>
  10. <bodystyle="text-align: center;">
  11. <h2>meta实现页面跳转</h2>
  12. <hr/>
  13. <span>实现代码</span>
  14. <mark>&lt;meta http-equiv="refresh" content="10;url=http://www.baidu.com"&gt;</mark>
  15. <script>
  18. </script>
  19. </body>
  20. </html>
 
★利用定时器实现
参考代码
  1. <h2>定时器实现页面跳转</h2>
  2. <small>结合location的replace方法实现不能返回的跳转</small>
  3. <hr/>
  4. <b>
  5. <mark>10秒后跳转到百度首页</mark>
  6. </b>
  7. <br/>
  8. <timeid="ShowTime"></time>
  9. <script>
  10. setTimeout("window.location.replace(\'http://www.baidu.com\')",10000);
  11. //注意此处使用replace方法，因此当跳转到目的链接之后是通过浏览历史或者前进、后退按钮返回
  12. //此处直接写执行的代码，因此需要用冒号括起来
  13. //*延时10s后跳转到baidu
  14. setInterval(function test(){
  15. var time = document.getElementById(\'ShowTime\');
  16. time.innerText =newDate().toLocaleTimeString();
  17. },1000);
  18. //显示当前时间
  19. //执行代码写成函数，无需用冒号括起来，并且更规范些
  20. </script>
 





以上是关于页面跳转的两种实现方法的主要内容，如果未能解决你的问题，请参考以下文章

实现机器远程跳转的两种自动化方式

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

Angular中实现页面跳转的两个方法

[vue-router4快速入门] 1.页面跳转的两种方式

vue 页面跳转的两种方式

thinkphp页面跳转有几种方法？