<meta>標籤的定時跳轉、重新整理
阿新 • • 發佈：2020-08-26
需求場景：一般用到的不太多，暫時遇到的只有提交的時候，跳轉到等待頁面(裡面有倒計時或者是一個圖片倒計時gif)的時候
解決方法： 在該等待頁面使用<meta>標籤，或者js的定時方法
一 <meta>標籤
<!---使用標籤跳轉 3秒後在本頁面跳到新頁面--> <meta http-equiv="Refresh" content="3; URL=orderList.html"> <!---題外: 每隔30秒後重新整理, 特別那種適合視覺化資料分析, 每隔幾秒幾分鐘, 重新整理一下, 重獲新資料--> <meta http-equiv="Refresh" content="30">
這種方法, 我測的過程中, 沒有看到瀏覽器的前進和返回, 應該回退不了
二 js的setTimeout 或者setInterval
setTimeout(function(){ // window.location.href="orderList.html"; // 在同當前視窗中開啟視窗 window.open("orderList.html"); // 新標籤頁開啟 },3000)
<!DOCTYPE html> <html> <head> <meta charsetView Code="UTF-8"> <title>第一個</title> </head> <body> 第一個頁面 測試3秒跳轉orderList頁面 <button onclick="hanleskipPage()">點選</button> <script src="../jquery-2.1.4.min.js"></script> <script> // 到時間3秒 functionhanleskipPage(){ setTimeout(function(){ // window.location.href="orderList.html"; // 在同當前視窗中開啟視窗 window.open("orderList.html"); // 如果瀏覽器不攔截的話 會新標籤頁開啟 },3000) } </script> </body> </html>
我用的setTimeout , 不會用setInterval ,大概這樣
// 跳轉 function skipPage(){ window.location.href="orderList.html"; // 在同當前視窗中開啟視窗 } // 每3秒 呼叫一次skipPage()函式 function hanleskipPage(){ var num = setInterval(function(){ clearInterval(num); // 停止num的skipPage()函式的執行: skipPage(); },3000); }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>第一個</title> </head> <body> 第一個頁面 測試3秒跳轉orderList頁面 <button onclick="hanleskipPage()">點選</button> <script src="../jquery-2.1.4.min.js"></script> <script> // 跳轉 function skipPage(){ window.location.href="orderList.html"; // 在同當前視窗中開啟視窗 } // 每3秒 呼叫一次skipPage()函式 function hanleskipPage(){ var num = setInterval(function(){ clearInterval(num); // 停止num的skipPage()函式的執行: skipPage(); },3000); } </script> </body> </html>View Code
<meta>標籤還有很多需要學的...