Html5監聽返回事件

使用的場景：移動前端

1、安卓手機物理返回鍵

2、蘋果手機在企業微信打開瀏覽器的返回按鈕

移動前端開發語言是：vue

路由跳轉：vue-router hash模式

先介紹一下html5中history有哪些屬性和API，我們用到了其中2個方法（pushState、replaceState），來根據狀態存儲的數據判斷是否觸發返回事件

1、window.history.length - 歷史記錄長度

2、window.history.state - 歷史記錄狀態

3、window.history.go(num) - 回到指定的歷史記錄（參數num可以是正/負）

4、window.history.back() - 回到上一個歷史記錄

5、window.history.forward() - 回到下一個歷史記錄（前提當前歷史記錄不是最新的）

6、window.history.pushState(state, title, newUrl) - 新增一個歷史記錄（路徑等于當前的url + newUrl ）

7、window.history.replaceState(state, title, newUrl) - 替換當前的歷史記錄路徑（路徑等于當前的url + newUrl ）

監聽事件：window.onpopstate

pushState和replaceState作用演示：

打開當前頁面路徑如下(D:/webstorm_workspace/demo-code/eventListenerBack/test.html)，歷史記錄長度1

點擊pushState按鈕：創建了一條新的歷史記錄（新建狀態）、歷史記錄長度2

pushState按鈕的代碼如下：

// pushState會新建一條歷史記錄
pushState = () => {
 let state = {'name': '張三 - pushState'}
 window.history.pushState(state, null, '?pushState')
 console.log('pushState')
 console.log(window.history.state)
}

點擊replaceState按鈕：替換當前的歷史記錄（更新狀態），歷史記錄長度2

replaceState按鈕的代碼如下：

// replaceState會覆蓋當前的歷史記錄
replaceState = () => {
 let state = {'name': '張三 - replaceState'}
 window.history.replaceState(state, null, '?replaceState')
 console.log('replaceState')
 console.log(window.history.state)
}

監聽事件演示

點擊返回按鈕：會觸發監聽事件window.onpopstate方法；之前的路徑是(D:/webstorm_workspace/demo-code/eventListenerBack/test.html?replaceState)，返回到(D:/webstorm_workspace/demo-code/eventListenerBack/test.html)

返回按鈕的代碼如下：

// 返回按鈕監聽
window.onpopstate = (e) => {
 console.log('觸發onpopstate方法')
 console.log(historyState)
 // 判斷前一個歷史記錄存儲的state數據來確定是否需要改變當前的數據
}

總結

1、什么時候會觸發這個監聽事件？除了back方法，go和forward方法也可以觸發

2、前進后退歷史記錄需要根據條件判斷時，需要綁定監聽事件

vue-router模式：https://www.cnblogs.com/xufeimei/p/10745353.html

演示代碼：https://github.com/github-gmm/demo-code/blob/master/eventListenerBack/test.html

. 基本概念

1.1 語句作用

return語句用于終止一個函數的執行，同時將一個返回值返回給這個函數的調用者。因此，return語句必須要被包含在函數之中；否則，程序就會出錯。如果沒有為return語句指明它的返回值，那么它就默認返回undefined。

如果一個函數中沒有顯式的寫明return語句，那么在函數執行時JavaScript會在該函數執行流程的末尾自動添加一條未指明返回值的return語句。return語句也可以被添加在函數的前面部分，這通常用于當滿足某個條件時而提前退出函數。

1.2 語法結構

return語句的語法結構如下所示：

return [expression];

其中expression可以是JavaScript中任意合法的表達式，它的計算結果就是return語句的返回值，在函數終止的時候會被返回給該函數的調用者。如果省略了expression，那么return語句的返回值就默認為undefined。

如果要顯式指明expression，那么它和return關鍵字必須寫在同一行上，即它們之間不能有換行符。否則，JavaScript會自動在return關鍵字的后面添加分號。此時，該return語句其實是一個未指明返回值的return語句，而expression在return語句之后永遠都不會被執行到。

2. 示例

2.1 指明返回值

<script>
    // 定義一個函數，計算一個數的兩倍
    function twice(x) {
        var result = x * 2;
        return result;
    }

    // 調用該函數，并打印返回值
    var value1 = twice(9);
    console.log("value1 = " + value1);
</script>

以上代碼的執行結果如下圖所示。我們用實參9調用函數twice()，它先計算9的兩倍然后再返回該結果，隨后該返回值被賦值給了變量value1。第10行的代碼打印出value1的值，可以看到它的值確實為18。

該示例中的twice()函數還可以簡寫為下面的形式，即計算兩倍的表達式被包含在return語句中，它的結果被直接返回。這樣就不需要先聲明一個變量臨時保存計算結果，再用return語句返回該變量。

<script>
    // 和上面代碼中的twice函數完全等價
    function twice(x) {
        return x * 2;
    }
</script>

2.2 省略返回值

<script>
    // 定義一個函數，它的最后是一條沒有指明返回值的return語句
    function abc() {
        console.log("執行函數abc().");
        return;
    }

    // 調用該函數，并打印返回值
    var value2 = abc();
    console.log("value2 = " + value2);
</script>

從下圖的執行結果中我們可以看到，首先打印出了字符串"執行函數abc()."，說明函數abc()確實被執行了。第10行的代碼打印出的變量value2的值為undefined，這正是return語句的默認返回值。

2.3 省略return語句

<script>
    // 定義一個函數，它省略了return語句
    function abc() {
        console.log("執行函數abc().");
    }

    // 調用該函數，并打印返回值
    var value3 = abc();
    console.log("value3 = " + value3);
</script>

下圖中的執行結果表明，該示例和上一個例子的執行結果完全一致（除了變量被命名為value3之外）。該例子的成功執行表明，當一個函數的執行流程的最后一條語句是沒有顯式指定返回值的return語句時，該return語句可以被省略。

當一個函數的執行流程的最后缺少return語句的時候，JavaScript會自動在該執行流程的最后添加一條沒有返回值的return語句，當然該函數的返回值就為undefined了。

2.4 return語句不能在函數之外

<script>
    // return 語句在函數之外：這會導致程序出錯
    return;
    console.log("青石野草");
</script>

以上代碼的執行結果如下圖所示，我們可以看到瀏覽器明確指出第3行的return語句是錯誤的。

2.5 提前終止函數

return語句不一定非要是函數的最后一條語句，它也可以處于函數的前面或中間，用于提前終止函數的執行。示例代碼如下所示：

<script>
    // 定義一個函數，它計算一個數的相反數；
    // 當參數為0時，它會被提前終止
    function opposite(x) {
        if(x == 0) {
            console.log("0的相反數是它自身。");
            return 0;
        }

        console.log("不為0的數的相反數是它的負數。");
        return -x;
    }

    // 調用函數，并打印返回值
    var value4 = opposite(0);
    console.log("value4 = " + value4);
</script>

我們使用實參0調用函數opposite()，當實參為0的時候，會執行if語句中的代碼。它首先打印字符串"0的相反數是它自身。"，然后遇到語句return 0;。這條return語句提前終止函數的執行，并返回0。因此，if語句后面的那一條打印語句和return -x;均不會被執行。下圖中的執行結果正印證了這一執行流程。

這個例子也說明了一個函數可以包含多個return語句，用于根據不同的情況而退出函數。

2.6 自動添加分號

<script>
    // 定義一個函數，它和第一個例子中的函數幾乎一樣；
    // 只是原本的return語句被拆分成了兩行。
    function twice(x) {
        var result = x * 2;
        return
        result;
    }

    // 調用函數，并打印返回值
    var value5 = twice(9);
    console.log("value5 = " + value5);
</script>

該示例的執行結果如下圖所示，可以看到第11行打印出的變量value5的值為undefined，而不是我們原本期望的數字18。這是怎么回事呢？

這個示例和第一個例子唯一的不同就是我們把return語句拆成了兩行，return關鍵字和它的返回值result被寫在了不同的行上。在其它編程語言或者JavaScript的某些其它語句中，這樣的拆行不會對原程序有任何影響。

但JavaScript的return語句是個例外，在本文的開頭我們就說過如果return關鍵字和它的返回值之間有換行符的話，JavaScript會自動在return關鍵字之后插入一個分號，此時該return語句的意義就和我們所期望的不同了。

這樣自動插入分號的結果就會讓該示例中的twice()函數實際等同于下面的代碼。此時無論傳遞的參數是多少，return語句都會提前終止函數并默認返回undefined，而變量result始終都不會被返回。

<script>
    // 定義一個函數，它和第一個例子中的函數幾乎一樣；
    // 只是原本的return語句被拆分成了兩行。
    function twice(x) {
        var result = x * 2;
        return;     // 注意，這個分號是JavaScript自動插入的；它改變了程序的語義。
        result;
    }
</script>

如果你真的想要將return語句寫在多行上，那么你可以將返回值用括號括起來。但請一定要注意，此時左括號也必須要和return關鍵字寫在同一行上，就像下面的代碼這樣：

<script>
    /* 要將return語句寫在多行上，可以用括號將返回值括起來；
     * 但是，左括號也必須要和return關鍵字寫在同一行上。
     */
    function twice(x) {
        return (
            x * 2
        );
    }
</script>

(完）

Low了，網頁居然還用這么老掉牙的特效！弄個粗體字，下劃線就是突出重點了？真是一股濃濃的鄉村風撲面而來；弄個圖在頁面飄來飄去就是動畫效果了，你要這么認為的話那我只能保持沉默了。在HTML5占領著整個互聯網之時，想透過網頁抓住所有人的眼球，因循守舊是行不通的。因此，有你不能不知道的HTML常用代碼。只有熟悉掌握了常用的HTML代碼，你才能在編寫網頁的時候做到行云流水，用處處流露著細膩和創意的動效細節打動所有人。

在這里還是要說一下我自己建的前端JavaScript學習交流群：574462090，不管你是小白還是大牛，小編我都挺歡迎，小白嘛，多問點問題也就學好了，不定期分享干貨，包括最新的2017年前端學習資料，歡迎初學和進階中的小伙伴。

html代碼大全：結構性定義

文件類型<HTML></HTML> （放在檔案的開頭與結尾）

文件主題<TITLE></TITLE> （必須放在「文頭」區塊內）

文頭<HEAD></HEAD> （描述性資料，像是「主題」）

文體<BODY></BODY> （文件本體）

標題<H?></H?> （從1到6，有六層選擇）

標題的對齊 <H?ALIGN=LEFT|CENTER|RIGHT></H?>

區分<DIV></DIV>

區分的對齊 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

引文區塊<BLOCKQUOTE></BLOCKQUOTE> （通常會內縮）

強調<EM></EM> （通常會以斜體顯示）

特別強調<STRONG></STRONG> （通常會以加粗顯示）

引文<CITE></CITE> （通常會以斜體顯示）

碼<CODE></CODE> （顯示原始碼之用）

樣本<SAMP></SAMP>

鍵盤輸入<KBD></KBD>

變數<VAR></VAR>

定義<DFN></DFN> （有些瀏覽器不提供）

地址 <ADDRESS></ADDRESS>

大字<BIG></BIG>

小字<SMALL></SMALL>

與外觀相關的標簽（作者自訂的表現方式）

加粗<B></B>

斜體<I></I>

底線<U></U> （尚有些瀏覽器不提供）

刪除線<S></S> （尚有些瀏覽器不提供）

下標<SUB></SUB>

上標<SUP></SUP>

打字機體<TT></TT> （用單空格字型顯示）

預定格式<PRE></PRE> （保留文件中空格的大?。?/p>

預定格式的寬度<PRE WIDTH=?></PRE>（以字元計算）

向中看齊<CENTER></CENTER> （文字與圖片都可以）

閃耀<BLINK></BLINK> （有史以來最被嘲弄的標簽）

字體大小 <FONTSIZE=?></FONT>（從1到7）

改變字體大小 <FONTSIZE=+|-?></FONT>

基本字體大小 <BASEFONTSIZE=?> （從1到7; 內定為3）

字體顏色 <FONTCOLOR="#$$"></FONT>（$$為顏色代碼）

html代碼大全：修改頁面的實用性HTML代碼

1)貼圖：<img src="圖片地址">

2)加入連接：<a href="所要連接的相關地址">寫上你想寫的字</a>

3)在新窗口打開連接：<a href="相關地址" target="_blank">寫上要寫的字</a>

4)移動字體(走馬燈)：<marquee>寫上你想寫的字</marquee>

5)字體加粗：<b>寫上你想寫的字</b>

6)字體斜體：<i>寫上你想寫的字</i>

7)字體下劃線: <u>寫上你想寫的字</u>

8)字體刪除線: <s>寫上你想寫的字</s>

9)字體加大: <big>寫上你想寫的字</big>

10)字體控制大小：<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大，h5最小)

11)更改字體顏色：<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進制)之間

12)消除連接的下劃線：<a href="相關地址" style="text-decoration:none">寫上你想寫的字</a>

13)貼音樂：<embed src="音樂地址" width="寬度" height="高度" autostart=false>

14)貼flash: <embed src="flash地址" width="寬度" height="高度">

15)貼影視文件：<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>

16)換行：<br>

17)段落：<p>段落</p>

18)原始文字樣式：<pre>正文</pre>

19)換帖子背景：<body background="背景圖片地址">

20)固定帖子背景不隨滾動條滾動：<body background="背景圖片地址" body

bgproperties=fixed>

21)定制帖子背景顏色：<body bgcolor="#value">(value值見10)

22)帖子背景音樂：<bgsound="背景音樂地址" loop=infinite>

23)貼網頁：<iframe. src="相關地址" width="寬度" height="高度"></iframe>

html代碼大全：常常會遇到的問題

點擊關閉窗口

<a href="javascript.:top.window.close();">點擊關閉窗口</a>！

請問如何去掉主頁右面的滾動條？

如何做到讓一個網頁自動關閉.

<html>

<head>

</object>

</head>

<body >

這個窗口會在10秒過后自動關閉,而且不會出現提示. </body>

如何在不刷新頁面的情況下刷新css?

<style>

button{ color:#000000;}

</style>

<button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點擊按鈕直接修改style標簽里button選擇符使按鈕改為　　紅色</button>

請問如何讓網頁自動刷新？

在head部記入<META. HTTP-EQUIV="Refresh" c>其中20為20秒后自動刷新，你可以更改為任意值。

如何讓頁面自動刷新？

方法一，用refresh

HTML 代碼片段如下:

<head>

</head>

5表示刷新時間

[Ctrl+A 全部選擇提示:你可先修改部分代碼，再按運行]

方法二，使用setTimeout控制

function rl(){

document.location.reload()

}

setTimeout(rl,2000)

</SCRIPT>

如何讓超鏈接沒有下劃線

在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼：

a { text-decoration: none}

--> </style>

請問如何去掉IE的上下滾動條？

</body>

怎樣才能把RealPlayer文件在網頁做一個試聽連接？

如何用html實現瀏覽器上后退按鈕的功能？

或者

html代碼大全：你不一定知道的技巧

16. ncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標右鍵

　　<table borderncontextmenu=return(false)><td>no</table> 可用于Table

17. <body nselectstart="return false"> 取消選取、防止復制

18.onpaste="return false" 不準粘貼

19.oncopy="return false;" ncut="return false;" 防止復制

20. <link rel="Shortcut Icon"href="favicon.ico"> IE地址欄前換成自己的圖標

21. <link rel="Bookmark"href="favicon.ico"> 可以在收藏夾中顯示出你的圖標

22. <inputstyle="ime-mode:disabled"> 關閉輸入法

23. 永遠都會帶著框架

if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網頁

// --></script>

24. 防止被人frame.

<SCRIPT. LANGUAGE=JAVASCRIPT><!--

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

25. 網頁將不能被另存為

26. 查看網頁源代碼

<input type=button value=查看網頁源代碼

onclick="window.location = "view-source:"+"http://www.pconline.com.cn"">

27.刪除時確認

28.屏蔽功能鍵Shift,Alt,Ctrl

function look(){

if(event.shiftKey)

alert("禁止按Shift鍵!");//可以換成ALT　CTRL

}

document.onkeydown=look;

</script>

29. 網頁不會被緩存

<META. HTTP-EQUIV="pragma" CONTENT="no-cache">

<META. HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate">

<META. HTTP-EQUIV="expires"CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

或者<META. HTTP-EQUIV="expires"CONTENT="0">

30.怎樣讓表單沒有凹凸感？

或 <input type=text style="border-left:none;border-right:none; border -top:none; border-bottom: 1 solid#000000"></textarea>

31.不要滾動條?

讓豎條沒有:

</body>

讓橫條沒有:

</body>

兩個都去掉？更簡單了

</body>

32.怎樣去掉圖片鏈接點擊后，圖片周圍的虛線？

33.電子郵件處理提交表單

<form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">

</form>

34.在打開的子窗口刷新父窗口的代碼里如何寫？

window.opener.location.reload()

35.如何設定打開頁面的大小

打開頁面的位置<bodynload="top.moveBy(300,200);">

36.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

<STYLE>

body

{background-image:url(logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}

</STYLE>

37. 檢查一段字符串是否全由數字組成

function checkNum(str){return str.match(//D/)==null}

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

// --></script>

38. 獲得一個窗口的大小

document.body.clientWidth; document.body.clientHeight

39. 怎么判斷是否是字符

if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");

else alert("全是字符");

40.TEXTAREA自適應文字行數的多少

</textarea>

41. 日期減去天數等于第二個日期

function cc(dd,dadd)

{

//可以加上錯誤處理

var a = new Date(dd)

a = a.valueOf()

a = a - dadd * 24 * 60 * 60 * 1000

a = new Date(a)

alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日")

} cc("12/23/2002",2)

</script>

42. 選擇了哪一個Radio

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

end function

</script><BODY>

<INPUT name="radio1" type="radio"value="style" checked>Style.

<INPUT name="radio1" type="radio"value="barcode">Barcode

</BODY></HTML>

43.腳本永不出錯

<SCRIPT. LANGUAGE="JavaScript">

</SCRIPT>

44.ENTER鍵可以讓光標移到下一個輸入框

文末再提兩點建議吧：

剛學前端JavaScript的時候，一定不要追求速成，編程不比其他傳統行業，可以快速的上手，他需要一定的代碼量積累起來，不然你追求速成很可能會車毀人亡。
這個文章到這里就說完了，想要前端學習資料的進我的群自助領取，已經上傳到群文件里了：574462090，歡迎初學和進階中的小伙伴。

如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘前端根據地’關注后回復‘給我資料’可以領取一套完整的學習視頻

在線咨詢

上一篇：HTML5 的JavaScript 客戶端PDF解決方案-jsPDF
下一篇：發現設計細節，原來單選和多選也有這么多講究

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Html5監聽返回事件

. 基本概念

1.1 語句作用

1.2 語法結構

2. 示例

2.1 指明返回值

2.2 省略返回值

2.3 省略return語句

2.4 return語句不能在函數之外

2.5 提前終止函數

2.6 自動添加分號

如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘前端根據地’關注后回復‘給我資料’可以領取一套完整的學習視頻

您的項目需求