前端頁面自動跳轉方法

M1.使用meta元素

<meta http-equiv="refresh" content="5;url=hello.html">
http-equiv="refresh" 是刷新頁面, 5是指5秒后執(zhí)行刷新操作,url是跳轉的目的頁面地址。
<meta http-equiv="refresh" content="5"> 這行代碼的意思是只刷新,不跳轉。

Meta Refresh Tag自動轉向法: 由于搜索引擎能夠讀取HTML,而Meta tags也是HTML,所以對于這種自動轉向法,搜索引擎能夠自動檢測出來。因而無論網站的轉向出于什么目的,都很容易被搜索引擎視做對讀者的誤導而受到懲罰。不過,如果跳轉延遲時間設置合適,搜索引擎就不會視之為作弊。 頁面定時刷新元標識(Meta Refresh Tag)只能放在HTML代碼的< HEAD>區(qū)里。如代碼所示: “5”是延時跳轉的時間,單位是秒。如果設為0,就表示立即跳轉。從搜索引擎優(yōu)化的角度出發(fā),一般不希望自動轉向有延遲。不過,如果是用Meta Refresh標識進行轉向,一定要注意把延遲時間設定成至少10秒以上。

M2.使用script代碼

window.location.href = 'hello.html'; 立即跳轉到hello.html頁面。
setTimeout("window.location.href = 'hello.html'", 5000); 5秒后跳轉到hello.html頁面。

用javascript實現<big>無延遲</big>自動重定向的好處在于:用戶所訪問的目標URL不會保留在用戶瀏覽器的歷史記錄中,如果用戶按返回按鈕返回,則將回到跳轉前的網頁,而不是包含javascript自動重定向腳本的跳轉頁面,所以不會出現當用戶點擊返回按鈕后返回至重定向頁,然后該頁自動跳轉到用戶本來想離開的那個頁面的尷尬情形。

倒數計數再跳轉:
<span id="totalTime">5</span>
<script type="text/javascript"> //M4 倒數計時跳轉 var totalTime = document.getElementById('totalTime'); var second = totalTime.textContent; //totalTime.innerText; setInterval('redirect()', 1000); function redirect(){ if(second <= 0){ location.href = 'hello.html'; } totalTime.innerText = --second; } </script>
在當前頁面倒數5個數后,頁面跳轉到hello.html。

M3.使用form表單

<form action="hello.html" method="get" name="myform"></form>
<script type="text/javascript"> document.myform.submit(); </script>
會立馬跳轉到hello.html

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現,斷路器,智...
    卡卡羅2017閱讀 134,933評論 18 139
  • 22年12月更新:個人網站關停,如果仍舊對舊教程有興趣參考 Github 的markdown內容[https://...
    tangyefei閱讀 35,224評論 22 257
  • 搜索引擎優(yōu)化(Search engine optimization,簡稱SEO),指為了提升網頁在搜索引擎自然搜索...
    翻滾吧海闊天空閱讀 4,028評論 5 14
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,333評論 25 708
  • 這一夜 晚風輕拂 揚起了路旁的枝葉 寂寥的路上 交替變換的紅燈 閃爍的燈光下?lián)]舞的枝葉...
    柔痕閱讀 409評論 0 1