別找了，Html網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)頁(yè)面代碼全在這里了

信
51rgb
網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)頁(yè)面的代碼在很多時(shí)候都非常的有用，下面的是兩個(gè)簡(jiǎn)單的例子。僅供參考。

方案一，用<meta>里直接寫刷新語(yǔ)句：

<html>
<head>
<meta http-equiv="Content-Language" content="zh-CN">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<meta http-equiv="refresh" content="5;url=http://www.51rgb.com">
<title>html網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)代碼--西農(nóng)大網(wǎng)站</title>
</head>
<body>
測(cè)試：html網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)代碼<br/>
你可以在這里寫下你想的一切東西！<br />
如：西北農(nóng)林科技大學(xué)是一所985、211院校。<br />
</body></html>

方案二，用javascript腳本來(lái)跳轉(zhuǎn)

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>正在進(jìn)入西農(nóng)大網(wǎng)站</title>
</head>
<body>
<form name=loading>
<p align=center> <font color="#0066ff" size="2">正在進(jìn)入，請(qǐng)稍等</font><font color="#0066ff" size="2" face="Arial">...</font>
<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">
<inputtype=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;">
<script>
var bar=0
var line="||"
var amount="||"
count
function count{
bar=bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
{setTimeout("count",100);}
else
{window.location =http://www.51rgb.com;}
}</script>
</p>
</form><p align="center">
測(cè)試：html網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)代碼<br/>
你可以在這里寫下你想的一切東西！<br />
如：西北農(nóng)林科技大學(xué)是一所985、211院校。<br /><br />
如果您的瀏覽器不支持跳轉(zhuǎn),<astyle="text-decoration: none" ><font color="#FF0000">請(qǐng)點(diǎn)這里</font></a>.</p>
</body>
</html>

↓↓↓

言

最近公司vue項(xiàng)目中有一個(gè)需求，需要在當(dāng)前頁(yè)面刷新或跳轉(zhuǎn)時(shí)提示保存并可取消刷新，以防止填寫的表單內(nèi)容丟失。剛開始思考覺得很簡(jiǎn)單，直接在Router的鉤子中判斷就好了，但是會(huì)發(fā)現(xiàn)還有新的問題存在，瀏覽器刷新和當(dāng)前頁(yè)面關(guān)閉的時(shí)候無(wú)法監(jiān)聽，最終用window.onbeforeunload成功解決，所以用這篇文章簡(jiǎn)單記錄下整個(gè)解決過程。

vue-Router的鉤子：

路由鉤子可以分為全局的，單個(gè)路由獨(dú)享的以及組件級(jí)別的，解決上述需求只用到了組件級(jí)別的路由鉤子，所以本文只介紹組件級(jí)別的路由鉤子，全局的和單個(gè)路由獨(dú)享的路由鉤子有需要的同學(xué)可以去vue-router官網(wǎng)查看介紹：

組件級(jí)別路由鉤子分為三種：

beforeRouteEnter：當(dāng)成功獲取并能進(jìn)入路由(在渲染該組件的對(duì)應(yīng)路由被 confirm 前)
beforeRouteUpdate：在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
beforeRouteLeave：導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用

具體的介紹和寫法如下：

const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
 // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
 // 不！能！獲取組件實(shí)例 `this`
 // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒被創(chuàng)建
 // 可以通過傳一個(gè)回調(diào)給 next來(lái)訪問組件實(shí)例
 next(vm => { 
 // 通過 `vm` 訪問組件實(shí)例
 })
 },
 beforeRouteUpdate (to, from, next) {
 // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
 // 舉例來(lái)說，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
 // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
 // 可以訪問組件實(shí)例 `this`
 // 不支持傳遞回調(diào)(因?yàn)閠his實(shí)例已經(jīng)創(chuàng)建可以獲取到，所以沒必要)
 next()
 },
 beforeRouteLeave (to, from, next) {
 // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用
 // 可以訪問組件實(shí)例 `this`
 // 該導(dǎo)航可以通過 next(false) 來(lái)取消。
 const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
 if (answer) {
 next()
 } else {
 // 不支持傳遞回調(diào)(因?yàn)閠his實(shí)例已經(jīng)創(chuàng)建可以獲取到，所以沒必要)
 next(false)
 }
 }
}

注意：在刷新當(dāng)前頁(yè)面時(shí)候，beforeRouteLeave不會(huì)觸發(fā)，它只在進(jìn)入到其他頁(yè)面時(shí)候才會(huì)觸發(fā)，但是beforeRouteEnter會(huì)在刷新的時(shí)候觸發(fā)。

通過beforeRouteLeave這個(gè)路由鉤子，我們就可以在用戶要離開此頁(yè)面時(shí)候進(jìn)行提示了！

beforeRouteLeave (to, from, next) {
 const answer = window.confirm('當(dāng)前頁(yè)面數(shù)據(jù)未保存，確定要離開![image](http://note.youdao.com/favicon.ico)？')
 if (answer) {
 next()
 } else {
 next(false)
 }
 }

顯示的提示框如下：

監(jiān)聽瀏覽器的刷新、頁(yè)面關(guān)閉事件

但是，這個(gè)時(shí)候就實(shí)現(xiàn)了我們最終的需求了么？并沒有，還有一步：用window.onbeforeunload監(jiān)聽瀏覽器的刷新事件，當(dāng)然為了防止從當(dāng)前單頁(yè)面跳到其他頁(yè)面之后，在刷新所在新的頁(yè)面還會(huì)觸發(fā)window上的onbeforeunload的問題，我們不僅要及時(shí)的添加onbeforeunload事件，更要及時(shí)刪除此事件，下面有兩種解決方法可供選擇：

通過判斷它的路由是否是當(dāng)前需要添加禁止刷新的頁(yè)面

mounted() {
 window.onbeforeunload = function (e) {
 if(_this.$route.fullPath =="/layout/add"){
 e = e || window.event;
 // 兼容IE8和Firefox 4之前的版本
 if (e) {
 e.returnValue = '關(guān)閉提示';
 }
 // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
 return '關(guān)閉提示';
 }else{
 window.onbeforeunload =null
 }
}
};

在destory或者beforeDestory的生命周期中直接將onbeforeunload事件置空

mounted() {
 window.onbeforeunload = function (e) {
 e = e || window.event;
 // 兼容IE8和Firefox 4之前的版本
 if (e) {
 e.returnValue = '關(guān)閉提示';
 }
 // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
 return '關(guān)閉提示';
 }
};
destroyed() {
 window.onbeforeunload = null
 }

顯示的提示框如下：

總結(jié)

最終，在beforeRouteLeave和onbeforeunload的共同作用下，這個(gè)刷新、跳轉(zhuǎn)或者關(guān)閉等情況下需要提示保存的需求完美解決！但是，還有一點(diǎn)點(diǎn)小遺憾，就是onbeforeunload中彈框的自定義提示語(yǔ)設(shè)置始終無(wú)法生效，大家要是有更加合適的處理辦法，歡迎多多交流指正！

最后

以下是總結(jié)出來(lái)最全前端框架視頻，包含： javascript/vue/react/angualrde/express/koa/webpack 等學(xué)習(xí)資料。

【領(lǐng)取方式】

關(guān)注頭條前端全棧架構(gòu)丶第一時(shí)間獲取最新前端資訊學(xué)習(xí)

手機(jī)用戶可私信關(guān)鍵詞【前端】即可獲取全棧工程師路線和學(xué)習(xí)資料！

文地址：https://markodenic.com/html-tips/

Marko 2020年4月12日

在這篇文章中，我很興奮地與您分享一些非常有用的HTML小技巧。

*文章會(huì)定期更新，假如有新的小技巧的話。

但是首先，什么是HTML？

超文本標(biāo)記語(yǔ)言（HTML）是設(shè)計(jì)用來(lái)在瀏覽器中顯示文檔的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。它能夠獲得諸如級(jí)聯(lián)樣式表（CSS）、JavaScript等腳本語(yǔ)言技術(shù)的支持。

我們開始吧

1、loading="lazy"屬性

性能小技巧，我們能夠通過使用loading=lazy屬性，去推遲圖片的加載，直到用戶滾動(dòng)看到它們。

<img src='image.jpg' loading='lazy' alt='Alternative Text'>

2、郵箱、電話和短信的鏈接：

<a href="mailto:{email}?subject={subject}&body={content}">
  Send us an email
</a>

<a href="tel:{phone}">
  Call us
</a>

<a href="sms:{phone}?body={content}">
  Send us a message
</a>

3、有序列表的"start"屬性

通過使用"start"屬性去改變有序列表的開始點(diǎn)。

4、meter元素

您可以使用<meter>元素來(lái)顯示數(shù)量，無(wú)需JavaScript和CSS。

5、HTML的搜索

6、Fieldset元素

您可以使用fieldset元素，在一個(gè)web表單中對(duì)幾個(gè)控件和標(biāo)簽(<label>)進(jìn)行分組。

7、window.open

用target="_blank"打開的新頁(yè)面，新頁(yè)面中可以訪問原始的來(lái)源window，通過window.opener。這個(gè)可能會(huì)有隱含的安全或者性能問題。使用 rel="noopener" 或者 rel="noreferrer"去阻止這種行為。

<a href="https://markodenic.com/" target="_blank" rel="noopener">
	Marko's website
</a>

8、Base元素

如果您想讓您文檔中的所有鏈接都在新的tab頁(yè)打開，您可以使用base標(biāo)簽：

_self: 載入結(jié)果到當(dāng)前瀏覽上下文中。（該值是元素的默認(rèn)值）。
_blank: 載入結(jié)果到一個(gè)新的未命名的瀏覽上下文。
_parent: 載入結(jié)果到父級(jí)瀏覽上下文（如果當(dāng)前頁(yè)是內(nèi)聯(lián)框）。如果沒有父級(jí)結(jié)構(gòu)，該選項(xiàng)的行為和_self一樣。
_top: 載入結(jié)果到頂級(jí)瀏覽上下文（該瀏覽上下文是當(dāng)前上下文的最頂級(jí)上下文）。如果沒有父級(jí)，該選項(xiàng)的行為和_self一樣

9、破壞Favicon的緩存

為了能夠刷新你網(wǎng)站的favicon，你可以強(qiáng)制瀏覽器去下載新文件，通過給文件鏈接后面添加?v=2。

這個(gè)在生產(chǎn)環(huán)境特別有用，確保你的用戶使用的是最新的版本。

<link rel="icon" href="/favicon.ico?v=2" />

10、`spellcheck` 屬性

通過spellcheck屬性去定義元素是否應(yīng)該檢查拼寫錯(cuò)誤。

11、原生的HTML滑塊

您可以通過使用<input type="range">來(lái)創(chuàng)建一個(gè)滑塊

12、HTML手風(fēng)琴

您可以使用details元素去創(chuàng)建原生的HTML手風(fēng)琴

13、`mark` 標(biāo)記

您可以使用<mark>標(biāo)記去高亮文本。

14、`download`屬性

您可以在鏈接上使用download屬性，去下載您的文件，而不是打開鏈接。

<a href='path/to/file' download>
  Download
</a>

15、性能提示

使用圖片大小更小的.webp格式，同時(shí)提升網(wǎng)站性能。

<picture>
  <!-- load .webp image if supported -->
  <source srcset="logo.webp" type="image/webp">
  
  <!-- 
	Fallback if `.webp` images or <picture> tag 
	not supported by the browser.
  -->
  <img src="logo.png" alt="logo">
</picture>

16、Video縮略圖

使用poster屬性指定一張?jiān)谝曨l下載時(shí)顯示的圖片，或者一直到用戶點(diǎn)擊播放按鈕。

<video poster="path/to/image">

17、input type="search"

對(duì)于你的搜索輸入框可以使用type="search",然后你將會(huì)免費(fèi)獲得一個(gè)清除的按鈕。

在線咨詢

上一篇：ElementUI 不維護(hù)？供我們選擇 Vue 組件庫(kù)有很多
下一篇：CSS+HTML制作一個(gè)一般的導(dǎo)航欄

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商