使用CSS中的meta實現(xiàn)web定時刷新或跳轉(zhuǎn)的方法

meta源信息功能之頁面定時跳轉(zhuǎn)與刷新
幾乎所有的網(wǎng)頁頭部都有<meta>源信息。除了我們常用的定義編碼、關(guān)鍵字(name=”keywords”)、描述(name=”description”)(for SEO),還可以定義視區(qū)大小、縮放比例等(for 移動端),如下:
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
以及,定義網(wǎng)頁的過期時間,Cookie的過期時間等等。
就是我們網(wǎng)頁平時跳轉(zhuǎn),還可以使用<meta>實現(xiàn),下面幾個典型代碼示例:
- <meta http-equiv="refresh" content="5">
這個表示當(dāng)前頁面每5秒鐘刷一下,刷一下~
- <meta http-equiv="refresh" content="2; url='/'">
這個表示當(dāng)前頁面2秒后跳到首頁~
<meta http-equiv="refresh" content="0; url='http://www.qq.com/'">
頁面直接跳轉(zhuǎn)到騰訊網(wǎng)~
所以,當(dāng)我們下次遇到“登錄成功,正在跳轉(zhuǎn)到您之前訪問頁面……”的時候,可以使用<meta>的這個refresh刷新,跳轉(zhuǎn)功能,可以說是成本最低的。
上面Demo效果就是上面第1個示例代碼效果。
根據(jù)我的測試,此特性包括IE7在內(nèi)的瀏覽器都是支持的。
問題來了:為何meta跳轉(zhuǎn)不火呢?
大家可以看到,meta跳轉(zhuǎn),使用方便,不用寫JS,不用會后臺代碼,定時跳轉(zhuǎn)刷新什么的玩得照樣很溜,而且兼容性好,為啥總感覺不溫不火,很少看見有人提及呢?
新晉的小伙伴不知有沒有聽過這么一個詞,叫做“萬惡的IE6年代”。
據(jù)說,當(dāng)年,這一批老舊的瀏覽器,問題很多,其中就有對meta2個小小的不友好。我也是聽說,不一定準(zhǔn)確。坊間是這么傳聞的:
- 時間設(shè)為0的跳轉(zhuǎn),有時候頁面會閃一下;
跳轉(zhuǎn)到其他頁面,瀏覽器后退按鈕是不能用的;
但是啊,現(xiàn)在是什么年代啊,監(jiān)獄風(fēng)云都拍到第二季了,這些老問題,我覺得就可以忽略不計了。
不妨大膽試試meta跳轉(zhuǎn),好好利用下瀏覽器的原生特性,說不定就會發(fā)現(xiàn)比什么JS跳轉(zhuǎn)之流用得更開心。
相關(guān)文章
純CSS實現(xiàn)網(wǎng)頁內(nèi)部錨點跳轉(zhuǎn)時上下偏移的示例代碼
這篇文章主要介紹了純CSS實現(xiàn)網(wǎng)頁內(nèi)部錨點跳轉(zhuǎn)時上下偏移的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨2020-04-09CSS實現(xiàn)超級鏈接需要通過雙擊后跳轉(zhuǎn)
超級鏈接需要雙擊后跳轉(zhuǎn)如何實現(xiàn),其實很簡單,在本文將為大家介紹下具體的實現(xiàn)方法,感興趣的朋友不要錯過2013-10-12- 這篇文章主要介紹了CSS頁面中點擊超鏈接如何跳轉(zhuǎn)新的頁面,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-13