搜尋
首頁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
dom和bom对象有哪些dom和bom对象有哪些Nov 13, 2023 am 10:52 AM

dom和bom对象有:1、“document”、“element”、“Node”、“Event”和“Window”等5种DOM对象;2、“window”、“navigator”、“location”、“history”和“screen”等5种BOM对象。

bom和dom有什么区别bom和dom有什么区别Nov 13, 2023 pm 03:23 PM

bom和dom在作用和功能、与JavaScript的关系、相互依赖性、不同浏览器的兼容性和安全性考虑等方面都有区别。详细介绍:1、作用和功能,BOM的主要作用是操作浏览器窗口,它提供了浏览器窗口的直接访问和控制,而DOM的主要作用则是将网页文档转换为一个对象树,允许开发者通过这个对象树来获取和修改网页的元素和内容;2、与JavaScript的关系等等。

dom和bom实现了什么dom和bom实现了什么Nov 20, 2023 pm 02:28 PM

DOM实现了对网页内容的动态访问和更新,BOM则提供了与浏览器窗口进行交互的API,包括控制浏览器的行为、获取浏览器和用户环境的信息,DOM主要用于操作网页内容,而BOM则主要用于操作浏览器窗口和与浏览器交互,两者共同构成了Web前端开发中重要的基础,为开发者提供了丰富的方法来控制和操作网页及浏览器,实现交互性强、用户体验良好的Web应用程序。

PHP bom的定义及其应用场景PHP bom的定义及其应用场景Mar 09, 2024 pm 09:36 PM

PHPBOM的定义及其应用场景BOM(ByteOrderMark),即字节顺序标记,是一种用来标示文本编码格式的特殊字符序列。在PHP开发中,BOM通常用来解决一些特定的编码问题,在一些情况下,如果不正确地处理BOM可能会导致页面显示乱码或其他问题的发生。本文将详细介绍PHPBOM的定义以及其应用场景,并附上具体的代码示例来让读者更好地理解。一、PH

php 代码怎么去掉bomphp 代码怎么去掉bomOct 20, 2022 am 09:29 AM

php代码掉bom的方法:1、使用“function clearbom($contents){...}”方式去掉文本中的bom头;2、通过“function checkBOM ($filename) {...}”方法检测并去掉bom头;3、通过“function SearchBOM($string) {...}”方法搜索当前文件是否有BOM并去除即可。

前端bom和dom什么区别前端bom和dom什么区别Nov 13, 2023 pm 02:36 PM

区别有:1、含义不同,bom是指浏览器对象模型,dom是指文档对象模型;2、结构不同,bom以浏览器窗口为中心,dom文档中的元素被表示为节点,并按照树状结构进行组织;3、交互方式不同,bom通过Window对象与JS进行交互,dom通过对象之间的嵌套和引用进行交互;4、应用范围不同,bom用于浏览器窗口和浏览器的交互,dom用于文档内容的操作和交互;5、发展趋势不同等等。

bom和dom是什么模型bom和dom是什么模型Nov 13, 2023 pm 05:08 PM

BOM是浏览器对象模型,而DOM是文档对象模型。BOM是一种用于描述浏览器窗口和浏览器提供的各种对象的模型,它是浏览器的核心组成部分,通过BOM可以访问和操作浏览器窗口、框架等对象。DOM提供了一组API,使开发人员能够通过脚本语言访问和操作文档中的元素和属性,其核心概念包括节点、元素、属性、文本等,DOM树的根节点是document对象,通过该对象可以访问整个文档的内容。

bom和dom的核心对象是什么bom和dom的核心对象是什么Nov 13, 2023 pm 02:49 PM

bom和dom的核心对象分别是window对象和document对象。window对象代表浏览器窗口,并提供了一系列方法和属性来操作浏览器窗口,窗口对象可以通过JavaScript代码来访问和控制,它提供了一些常用的方法。document对象代表了当前网页的文档,它提供了一系列方法和属性来操作网页的内容,通过document对象,可以访问和操作网页中的各个元素。

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脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

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

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

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

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具