本篇主要介绍网页上常见的页面跳转技术。页面跳转有几种方式，比较常用的是window.location.href,window.location.replace,window.open，当然还有目前比较火的很多框架都采用的无刷新页面跳转技术window.history.pushState和window.history.replaceState。这些我都不讲^_^，我这里讲得是meta的一个相关配置。我相信，很多朋友看见实现的页面时会非常面熟，特别是男性！
以下是相关代码实现：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <meta http-equiv="refresh" content="5;url=https://www.baidu.com"/> 6 <title></title> 7 <style> 8 span { 9 color: red; 10 padding: 5px 15px; 11 background: #cccccc; 12 } 13 button { 14 padding: 10px; 15 display: inline-block; 16 vertical-align:top; 17 border-radius: 4px; 18 outline: none; } 19 </style> 20 </head> 21 <body> 22 <h1>对不起您浏览的页面已改变，<span>5</span> 秒后自动为您跳转... <button>手动跳转</button> 23 </h1> 24 <script> 25 var span = document.querySelector('span'), 26 btn = document.querySelector('button'); 27 var selfTimer = (function(){ var i = 5; 28 return function(){ 29 span.innerHTML = --i; 30 if (i == 0) 31 { clearInterval(timer); 32 } } })() 33 timer = setInterval(selfTimer, 1000); 34 btn.onclick = function() { 35 window.location.hash = 'https://www.baidu.com'; } 36 </script> 37 </body> 38 </html>
最后感谢慕课网的：
作者：外号理论汪
来源：慕课网