搜尋
首頁web前端js教程BOM之history對象

BOM之history對象

Feb 10, 2017 am 09:55 AM

前面的話

  history物件保存著使用者上網的歷史記錄,從視窗被開啟的那一刻算起。由於安全性的考慮,開發人員無法得到使用者瀏覽器的URL,但藉由使用者造訪過的頁面列表,可以在不知道實際URL的情況下實現後退和前進。本文將詳細介紹BOM中的history物件

 

length

  history.length屬性保存著歷史記錄的URL數量。初始時,該值為1。如果目前視窗先後造訪了三個網址,history.length屬性等於3

  由於IE10+瀏覽器在初始時回傳2,存在相容性問題,所以該值並不常用

history.length // 初始时,该值为1history.length // 访问三个网址后,该值为3

方法

  history物件提供了一系列方法,允許在瀏覽歷史之間移動,包括go()、back()和forward()

【go()】

  使用go()方法可以在使用者的歷史記錄中任意跳轉。這個方法接收一個參數,表示向後或向前跳轉的頁面數的一個整數值。負數表示向後跳轉(類似後退鈕),正數表示向前跳轉(類似前進按鈕)

history.go(-1history.go(1history.go(2

  go()方法無參數時,相當於history.go(0),可以刷新目前頁面

//刷新当前页面history.go();//刷新当前页面history.go(0);

【back()】

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

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

//后退一页history.back()//前进一页history.forward()

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

  [注意]使用歷史記錄時,頁面通常從瀏覽器快取之中加載,而不是重新要求伺服器發送新的網頁

 

增改記錄

 tory HTML5為history

增改記錄

 tory HTML5為history .pushState()和history.replaceState(),用來在瀏覽歷史中新增和修改記錄。 state屬性用來保存記錄對象,而popstate事件用來監聽history對象的變化

  [注意]IE9-瀏覽器不支援

【pushState()】

  history.pushState(pushState()】

  history.pushState()方法向瀏覽器歷史添加了一個狀態。 pushState()方法帶有三個參數:一個狀態物件、一個標題(現在被忽略了)以及一個可選的URL位址

history.pushState(state, title, url);

state object —— 状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。
当用户定向到一个新的状态时,会触发popstate事件。事件的state属性包含了历史纪录的state对象。如果不需要这个对象,此处可以填null
title —— 新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null
URL —— 这个参数提供了新历史纪录的地址。新URL必须和当前URL在同一个域,否则,pushState()将丢出异常。这个参数可选,如果它没有被特别标注,会被设置为文档的当前URL

㟎  假定當前網址是example.com/1. html,使用pushState方法在瀏覽記錄(history物件)中新增一個記錄

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');

  新增上面這個新記錄後,瀏覽器地址列立刻顯示example.com/2.html,但並不會跳過去這個新記錄後,瀏覽器地址列立刻顯示example.com/2.html,但並不會跳過去這個新記錄轉到2.html,甚至不會檢查2.html是否存在,它只是成為瀏覽歷史中的最新記錄。假如這時訪問了google.com,然後點擊了倒退按鈕,頁面的url將顯示2.html,但是內容還是原來的1.html。再點擊一次倒退按鈕,url將顯示1.html,內容不變

  總之,pushState方法不會觸發頁面刷新,只是導致history物件發生變化,地址列的顯示位址發生變化

  如果pushState的url參數,設定了一個新的錨點值(即hash),並不會觸發hashchange事件,,即使新的URL和舊的只在hash上有區別

  如果設定了一個跨域網址,則會報錯。這樣設計的目的是,防止惡意程式碼讓使用者以為他們是在另一個網站上

// 报错history.pushState(null, null, 'https://twitter.com/hello');

【replaceState()】

  history.replaceStateState方法的參數與pushStateState,不同之處在於方法一模一樣,不同之處在於方法)方法會修改目前歷史記錄條目而並非建立新的條目

  假定目前網頁是example.com/example.html

history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');

history.back()// url显示为http://www.php.cn/history.back()// url显示为http://www.php.cn/history.go(2)// url显示为http://www.php.cn/

【state】

history.pushState({page: 1}, 'title 1', '?page=1');

history.state// { page: 1 }

【state】

statestate〜〜〜〜〜.

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};

【popstate事件】

  每當同一個文檔的瀏覽歷史(即history物件)出現變化時,就會觸發popstate事件

  需要注意的是,只是調用不會觸發該事件,只有使用者點擊瀏覽器倒退按鈕和前進按鈕,或使用javascript呼叫back()、forward()、go()方法時才會觸發。另外,該事件只針對同一個文檔,如果瀏覽歷史的切換,導致加載不同的文檔,該事件也不會觸發

  使用的時候,可以為popstate事件指定回調函數。這個回呼函數的參數是一個event事件對象,它的state屬性指向pushState和replaceState方法為當前URL所提供的狀態對象(即這兩個方法的第一個參數)

var currentState = history.state;

  上面程式碼中的event.state,就是透過pushState和replaceState方法,為目前URL綁定的state物件

  這個state物件也可以直接透過history物件讀取

🎜🎜
var currentState = history.state;

 

往返缓存

  默认情况下,浏览器会在当前会话(session)缓存页面,当用户点击“前进”或“后退”按钮时,浏览器就会从缓存中加载页面

  浏览器有一个特性叫“往返缓存”(back-forward cache或bfcache),可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据,还保存了DOM和javascript的状态;实际上是将整个页面都保存在了内存里。如果页面位于bfcache中,那么再次打开该页面时就不会触发load事件

  [注意]IE10-浏览器不支持

【pageshow】

  pageshow事件在页面加载时触发,包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码,可以放在这个事件的监听函数

  第一次加载时,它的触发顺序排在load事件后面。从缓存加载时,load事件不会触发,因为网页在缓存中的样子通常是load事件的监听函数运行后的样子,所以不必重复执行。同理,如果是从缓存中加载页面,网页内初始化的JavaScript脚本(比如DOMContentLoaded事件的监听函数)也不会执行

  [注意]虽然这个事件的目标是document,但必须将其事件处理程序添加到window

  pageshow事件有一个persisted属性,返回一个布尔值。页面第一次加载时或没有从缓存加载时,这个属性是false;当页面从缓存加载时,这个属性是true

(function(){    var showCount = 0;
    window.onload = function(){
        console.log('loaded');
    }
    window.onpageshow = function(e){
        e = e || event;
        showCount ++;
        console.log(e.persisted,showCount + 'times');
    }
})();

  [注意]上面的例子使用了私有作用域,以防止变量showCount进入全局作用域。如果单击了浏览器的“刷新”按钮,那么showCount的值就会被重置为0,因为页面已经完全重新加载了

【pagehide】

  与pageshow事件对应的是pagehide事件,该事件会在浏览器卸载页面的时候触发,而且是在unload事件之前触发。与pageshow事件一样,pagehide在document上面触发,但其事件处理程序必须要添加到window对象

  [注意]指定了onunload事件处理程序的页面会被自动排除在bfcache之外,即使事件处理程序是空的。原因在于,onunload最常用于撤销在onload中所执行的操作,而跳过onload后再次显示页面很可能就会导致页面不正常

  pagehide事件的event对象也包含persisted属性,不过其用途稍有不同。如果页面是从bfcache中加载的,那么persisted的值就是true;如果页面在卸载之后会被保存在bfcache中,那么persisted的值也会被设置为true。因此,当第一次触发pageshow时,persisted的值一定是false,而在第一次触发pagehide时,persisted就会变成true(除非页面不会被保存在bfcache中)

window.onpagehide = function(e){
    e = e || event;
    console.log(e.persisted);
}


以上就是BOM之history对象的内容,更多相关内容请关注PHP中文网(www.php.cn)!



陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Python vs. JavaScript:開發環境和工具Python vs. JavaScript:開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎?檢查證據JavaScript是用C編寫的嗎?檢查證據Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python vs. JavaScript:比較用例和應用程序Python vs. JavaScript:比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具