js history對象 手機物理返回鍵

標籤：owa   href   預設值   允許   代碼   stat   描述   es2017   指令碼   

有興趣的可以瞭解下history對象，不感興趣也可以直接跳到手機物理返回鍵監聽部分

******************【history對象】有length屬性，go()/back()/forward()跳轉方法****************************

我們要瞭解瀏覽器的history對象， history對象儲存著使用者上網的記錄，從視窗被開啟的那一刻算起；history.length屬性儲存著記錄的URL數量。初始時，該值為1。如果當前視窗先後訪問了三個網址，history.length屬性等於3；history對象提供了一系列方法，允許在瀏覽曆史之間移動，包括go()、back()和forward()。

【go()】方法可以在使用者的記錄中任意跳轉。這個方法接收一個參數，表示向後或向前跳轉的頁面數的一個整數值。

go(負整數)：表示向後跳轉(類似於後退按鈕)

go(正整數)：表示向前跳轉(類似於前進按鈕)

樣本：

　　

go()方法無參數時，相當於history.go(0)，可以重新整理當前頁面

樣本：

　　

【back()】

back()方法用於模仿瀏覽器的後退按鈕，相當於history.go(-1)

【forward()】

forward()方法用於模仿瀏覽器的前進按鈕，相當於history.go(1)

樣本：

　　

如果移動的位置超出了訪問曆史的邊界，以上三個方法並不報錯，而是靜默失敗

【注意】使用記錄時，頁面通常從瀏覽器緩衝之中載入，而不是重新要求伺服器發送新的網頁

 

********************監聽手機物理返回鍵************************************

樣本：

A頁面跳到B頁面，監聽B頁面返回鍵，並做相應操作，那麼就可以在B頁面javascript指令碼寫如下監聽事件

pushHistory();

function pushHistory(){　　//剛一進到B頁面就往history記錄pushstate一個url

　　var state = {
　　　　title:"title",　　//可以傳空值""

　　　　url:"#"};

　　window.history.pushState(state,"title","#");

}

window.addEventListener("popstate",function(e){　　//只要B頁面按下手機物理返回鍵，就會被監聽到

　　//該幹嘛幹嘛

　　WeixinJSBridge.invoke(‘closeWindow‘,{},function(res){});　　//js代碼關閉端當前網頁

　　//window.location = "http://www.baidu.com";　　//跳轉到百度頁面

},false);

或者

$(function(){
　　window.history.pushState("","","#");
})
window.addEventListener("popstate",function(e){
　　//該幹嘛幹嘛
})

以上代碼就搞定監聽手機物理返回鍵並作處理，下面有興趣的可以瞭解

 

大家都知道在瀏覽器頁面中，可以在不知道實際URL的情況下實現後退和前進，但是由於安全方面的考慮，開發人員無法得到使用者瀏覽器的URL也沒辦法修改history裡已有的url連結；

HTML5為history對象添加了兩個新方法，history.pushState()和history.replaceState()，用來在瀏覽曆史中添加和修改記錄（兩個方法使用方法都一樣，不同的是pushState會改變history對象length屬性，而replaceState不會）。

pushState（相當於進棧）可以往history裡增加url連結，popState（相當於出棧）事件監測從history棧裡彈出url。既然有提供popstate事件監測，那麼我們就可以對popState進行監聽。

【注意】

popState事件當同一個文檔的history發生變化時，就會觸發popState事件；

需要注意的是，僅僅pushState和replaceState不會觸發該事件，只有使用者點擊瀏覽器的前進、後退按鈕才會觸發，或者使用javascript調用go()/back()/forward()才會觸發；另外該事件僅針對同一個文檔有效，如果瀏覽器曆史的切換，導致載入不同的文檔，也不會觸發該事件。

 

//無重新整理頁面切換：使用到如下API

【history.state】:當前url對應的狀態資訊

如果當前url不是通過pushState或者replaceState產生的，那麼history.state就為null；

【history.pushState(state, title, url)】：將當前的url和history.state加入到history中,並用新的state和URL替換當前。不會造成頁面重新整理；

state：與要跳轉的URL對應的狀態資訊

title：傳Null 字元就可以

url：要跳轉到的地址，不能跨域（跨域會報錯）

【history.replaceState】：用新的state和URL替換當前的，不會造成頁面重新整理；

state：與要跳轉的URL對應的狀態資訊

title：傳Null 字元就可以

url：要跳轉到的地址，不能跨域（跨域會報錯）

【window.onpopstate】

history.go和history.back（包括使用者按瀏覽器曆史前進後退按鈕）觸發，並且頁面無刷的時候（由於使用pushState修改了history）會觸發popstate事件，事件發生時瀏覽器會從history中取出URL和對應的state對象替換當

前的URL和history.state。通過event.state也可以擷取history.state。

 

【往返緩衝】

預設情況下，瀏覽器會在當前會話(session)快取頁面面，當使用者點擊“前進”或[上一頁] 按鈕時，瀏覽器就會從緩衝中載入頁面；瀏覽器有一個特性叫“往返緩衝”(back-forward cache或bfcache)，可以在使用者使用瀏覽器的“後退”和“前進”按鈕時加快頁面的轉換速度。這個緩衝中不僅儲存著頁面資料，還儲存了DOM和javascript的狀態；實際上是將整個頁面都儲存在了記憶體裡。如果頁面位於bfcache中，那麼再次開啟該頁面時就不會觸發load事件

 

addEventListener()方法，事件監聽(removeEventListener()方法移除設定的監聽事件)

文法：element.addEventListener(event,function,useCapture);

參數：

　　element:文檔節點、document、window 或 XMLHttpRequest

　　event:事件類型，如"click" 或 "mousedown"

　　function:事件觸發後調用的函數或者是實現了EventListener介面

　　useCapture:布爾值，用於描述事件是冒泡還是捕獲，參數可選，預設false（冒泡）

注意：event不要使用 "on" 首碼。 例如，使用 "click" ,而不是使用 "onclick"

樣本：　

element.addEventListener("click", function(){ alert("Hello World!"); });
等效

element.addEventListener("click", myFunction);

function myFunction() {

 　　alert ("Hello World!");
}
向window對象添加事件

window.addEventListener("resize", function(){

　　document.getElementById("demo").innerHTML = sometext;

});

事件冒泡還是捕獲？

事件傳遞方式有兩種：冒泡、捕獲、

事件傳遞定義了元素觸發的順序，如果你將 <p> 元素插入到 <div> 元素中，使用者點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發呢？

在 冒泡 中，內部元素的事件會先被觸發，然後再觸發外部元素，即： <p> 元素的點擊事件先觸發，然後會觸發 <div> 元素的點擊事件。

在 捕獲 中，外部元素的事件會先被觸發，然後才會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發 ，然後再觸發 <p> 元素的點擊事件。

addEventListener() 方法可以指定 "useCapture" 參數來設定傳遞類型：

addEventListener(event, function, useCapture);

預設值為 false, 即冒泡傳遞，當值為 true 時, 事件使用捕獲傳遞。

樣本：

document.getElementById("myDiv").addEventListener("click", myFunction, true);

【removeEventListener()方法】

element.removeEventListener("mousemove", myFunction);

【瀏覽器安全色處理】
var x = document.getElementById("myBtn");if (x.addEventListener) {                    // 所有主流瀏覽器，除了 IE 8 及更早版本    x.addEventListener("click", myFunction);} else if (x.attachEvent) {                  // IE 8 及更早版本    x.attachEvent("onclick", myFunction);} 
IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支援 addEventListener() 和 removeEventListener() 方法。
但是，對於這類瀏覽器版本可以使用 detachEvent() 方法來移除事件控制代碼:

element.attachEvent(event, function);element.detachEvent(event, function);

*****************************

 //手機端彈窗

$.pop.showAlert({
　　content: "提示的資訊",

　　yes:function(){　　//點確定之後執行的事件
　　　　window.location.href = "http://www.baidu.com"; 　　//跳轉到百度頁面
　　　　}
});

js history對象 手機物理返回鍵