电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

如何使用 JavaScript 操作瀏覽器歷史記錄 API

瀏覽:19日期:2023-10-07 13:04:00

History 是 window 對象中的一個(gè) JavaScript 對象,它包含了關(guān)于瀏覽器會(huì)話歷史的詳細(xì)信息。你所訪問過的 URL 列表將被像堆棧一樣存儲(chǔ)起來。瀏覽器上的返回和前進(jìn)按鈕使用的就是 history 的信息。

History 對象包含長度屬性,它包含了會(huì)話歷史記錄棧中的 URL 數(shù)量。例如,如果用戶在瀏覽器中打開一個(gè)標(biāo)簽頁,歷史記錄的長度將是 1(新的標(biāo)簽頁也是一個(gè)網(wǎng)頁)。然后用戶輸入一個(gè)網(wǎng)址 foo.com 并點(diǎn)擊回車,現(xiàn)在歷史記錄對象的長度將是 2, 用戶轉(zhuǎn)到其他頁面 bar.com,歷史記錄對象的長度將就是 3 了。

Back 和 Forward 方法

你可以使用 history 對象的 back 和 forward 方法來瀏覽網(wǎng)頁。例如,如果你想轉(zhuǎn)到上一個(gè)頁面,那么可以使用:

history.back()

同樣的,如果你想轉(zhuǎn)到下一頁,你可以使用:

history.forward()

Go 方法

如果您想向前或向后移動(dòng) n 個(gè)頁面,那么您可以使用 go 方法:

history.go(-2) // 倒退 2 頁history.go(2) // 前進(jìn) 2 頁

所以 history.go(1) 和 history.forward() 效果是相同的,history.go(-1) 和 history.go(-1) 效果是相同的。history.go 方法的默認(rèn)值為 0,如果不傳任何數(shù)字,則當(dāng)前頁面會(huì)被刷新。

window.history.go(0)window.history.go()

PushState

你也可以使用 pushState 和 replaceState 方法改變頁面的 URL。pushState 會(huì)改變頁面的 URL,并將改變后的 URL 添加到 history 對象的 URL 棧頂部。語法如下:

history.pushState(state, title, url)

參數(shù) state 是狀態(tài)數(shù)據(jù),它將被存儲(chǔ)在 history.state 變量中。參數(shù) title 是標(biāo)題文本,不過它對大多數(shù)瀏覽器都沒有效果,所以一般傳空字符串('')或傳 null 就可以了。

讓我們在控制臺(tái)中嘗試一下,在執(zhí)行之前,比如打開 baidu.com,然后在控制臺(tái)輸入:

history.pushState(’123’, ’’, ’new-url’)

執(zhí)行上面的代碼后,它會(huì)將頁面地址欄中的 URL 改為 baidu.com/new-url,同時(shí)將 URL 添加到 history 對象中。此時(shí)檢查 history.length 會(huì)增加 1。

除此之外,我們還可以為每個(gè) URL 存儲(chǔ)狀態(tài)(當(dāng)前頁面的數(shù)據(jù))。在上面的例子中,你會(huì)把 '123' 存儲(chǔ)在 history.state 變量中,當(dāng)你返回到這個(gè)頁面時(shí),你就可以 history.state 再次拿到到這些數(shù)據(jù)。例如:

history.pushState(’temp data 1’, ’title’, ’new-url-1’)history.state //'temp data 1'history.pushState(’temp data 2’, ’title’, ’new-url-2’)history.state //'temp data 2'history.back()history.state // 'temp data 1'

每當(dāng)通過 pushState 返回到之前被添加到歷史記錄的頁面時(shí),瀏覽器就會(huì)觸發(fā)一個(gè)名為 popstate 的事件,并將 state 數(shù)據(jù)作為參數(shù)。比如在瀏覽器打開一個(gè)新標(biāo)簽頁,進(jìn)入某個(gè)網(wǎng)頁(比如 baidu.com),先監(jiān)聽 popstate 事件:

window.addEventListener(’popstate’, (e) => console.log(e))

然后調(diào)用 pushState:

history.pushState({ name: ’test1’ }, ’title’, ’test1’)

然后按下返回按鈕,popstate 事件就會(huì)被觸發(fā),你可以在監(jiān)聽事件中查看打印出來的數(shù)據(jù)。在打印的數(shù)據(jù)中,可以找到 history.state 的值。

注冊 pushState 中的 url 可以是完整的 url,但必須和當(dāng)前頁面是相同的域名,否則會(huì)拋出跨域異常。

瀏覽器還有一個(gè) replaceState API,和 pushState 的區(qū)別是,它只改變了 URL,不會(huì)將 URL 添加到歷史記錄,這里就不再累述了。

實(shí)例演示

現(xiàn)在我們做一個(gè)小的網(wǎng)頁應(yīng)用,這個(gè)應(yīng)用將實(shí)現(xiàn)如下功能:

顯示用戶列表 可以通過下拉框篩選“先生”和“女士” 當(dāng)下列列表發(fā)生變化時(shí),URL 也會(huì)相應(yīng)的變化

我們先不關(guān)心 history API,先實(shí)現(xiàn)功能。下面是 html 關(guān)鍵代碼:

<select id='selectbox'> <option value='both'>全部</option> <option value='male'>先生</option> <option value='femalt'>女士</option></select><ul id='userslist'> <li gender='male'>張先生</li> <li gender='female'>李女士</li> <li gender='female'>王女士</li></ul>

下面是 javascript 關(guān)鍵代碼:

let selectBox = document.getElementById(’selectBox’)let usersList = document.getElementById(’usersList’)selectBox.addEventListener(’change’, onSelectBoxChange)function onSelectBoxChange(ev) { let val = this.value filterList(val)}function filterList(val) { let users = usersList.children for (let i = 0; i < users.length; i++) { let user = users[i] let gender = user.getAttribute(’gender’) if (gender === val || val === ’both’) { user.style.display = ’’ } else { user.style.display = ’none’ } }}

實(shí)現(xiàn)后的效果如下:

如何使用 JavaScript 操作瀏覽器歷史記錄 API

當(dāng)修改下拉列表時(shí),為了使瀏覽器地址也發(fā)生變化,需要使用 pushSate 方法:

function onSelectBoxChange(ev) { let val = this.value filterList(val) history.pushState({ gender: val }, null, val)}

如何使用 JavaScript 操作瀏覽器歷史記錄 API

此時(shí)會(huì)有個(gè)問題,當(dāng)我們點(diǎn)擊前進(jìn)/后退時(shí),瀏覽器地址變了,但對應(yīng)的數(shù)據(jù)卻不對。因此,當(dāng)進(jìn)行前進(jìn)/后退時(shí),我們需要監(jiān)聽 popstate 重新過濾數(shù)據(jù):

window.addEventListener(’popstate’, onPopState)function onPopState(ev) { let state = ev.state filterList(state.gender)}

我們還需要處理頁面刷新的問題。當(dāng)刷新頁面時(shí),歷史記錄不會(huì)改變,history.state 的狀態(tài)值也保持不變。所以我們可以從 history.state 中取出當(dāng)前的狀態(tài)數(shù)據(jù),利用 state.gender 的值就可以在 load 事件中來過慮出當(dāng)前 URL 對應(yīng)的用戶列表:

window.addEventListener(’load’, function () { let gender = history.state ? history.state.gender : ’both’ filterList(gender)})

這是個(gè)簡單的示例,你也可以繼續(xù)進(jìn)一步優(yōu)化。今天的分享就到這里,有問題請?jiān)谙旅媪粞耘秪~

以上就是如何使用 JavaScript 操作瀏覽器歷史記錄 API的詳細(xì)內(nèi)容,更多關(guān)于JavaScript 操作歷史記錄api的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 测试治具|过炉治具|过锡炉治具|工装夹具|测试夹具|允睿自动化设备 | 美国查特CHART MVE液氮罐_查特杜瓦瓶_制造全球品质液氮罐 | 空调风机,低噪声离心式通风机,不锈钢防爆风机,前倾皮带传动风机,后倾空调风机-山东捷风风机有限公司 | 不锈钢管件(不锈钢弯头,不锈钢三通,不锈钢大小头),不锈钢法兰「厂家」-浙江志通管阀 | 铝板冲孔网,不锈钢冲孔网,圆孔冲孔网板,鳄鱼嘴-鱼眼防滑板,盾构走道板-江拓数控冲孔网厂-河北江拓丝网有限公司 | 深圳市索富通实业有限公司-可燃气体报警器 | 可燃气体探测器 | 气体检测仪 | 成都离婚律师|成都结婚律师|成都离婚财产分割律师|成都律师-成都离婚律师网 | 上海恒驭仪器有限公司-实验室平板硫化机-小型平板硫化机-全自动平板硫化机 | 小型单室真空包装机,食品单室真空包装机-百科 | 金属管浮子流量计_金属转子流量计厂家-淮安润中仪表科技有限公司 | 烟气换热器_GGH烟气换热器_空气预热器_高温气气换热器-青岛康景辉 | 电缆故障测试仪_电缆故障定位仪_探测仪_检测仪器_陕西意联电气厂家 | ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 齿轮减速机_齿轮减速电机-VEMT蜗轮蜗杆减速机马达生产厂家瓦玛特传动瑞环机电 | 济南铝方通-济南铝方通价格-济南方通厂家-山东鲁方通建材有限公司 | 防火板_饰面耐火板价格、厂家_品牌认准格林雅 | 冷轧机|两肋冷轧机|扁钢冷轧机|倒立式拉丝机|钢筋拔丝机|收线机-巩义市华瑞重工机械制造有限公司 | 空气弹簧|橡胶气囊|橡胶空气弹簧-上海松夏减震器有限公司 | 冷凝锅炉_燃气锅炉_工业燃气锅炉改造厂家-北京科诺锅炉 | 浙江清风侠环保设备有限公司| PC阳光板-PC耐力板-阳光板雨棚-耐力板雨棚,厂家定制[优尼科板材] | VOC检测仪-甲醛检测仪-气体报警器-气体检测仪厂家-深恒安科技有限公司 | 尚为传动-专业高精密蜗轮蜗杆,双导程蜗轮蜗杆,蜗轮蜗杆减速机,蜗杆减速机生产厂家 | 全自动端子机|刺破式端子压接机|全自动双头沾锡机|全自动插胶壳端子机-东莞市傅氏兄弟机械设备有限公司 | 玻璃钢型材-玻璃钢风管-玻璃钢管道,生产厂家-[江苏欧升玻璃钢制造有限公司] | 辽宁资质代办_辽宁建筑资质办理_辽宁建筑资质延期升级_辽宁中杭资质代办 | 深圳美安可自动化设备有限公司,喷码机,定制喷码机,二维码喷码机,深圳喷码机,纸箱喷码机,东莞喷码机 UV喷码机,日期喷码机,鸡蛋喷码机,管芯喷码机,管内壁喷码机,喷码机厂家 | 青岛球场围网,青岛车间隔离网,青岛机器人围栏,青岛水源地围网,青岛围网,青岛隔离栅-青岛晟腾金属制品有限公司 | 对照品_中药对照品_标准品_对照药材_「格利普」高纯中药标准品厂家-成都格利普生物科技有限公司 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库 | 润滑油加盟_润滑油厂家_润滑油品牌-深圳市沃丹润滑科技有限公司 琉璃瓦-琉璃瓦厂家-安徽盛阳新型建材科技有限公司 | 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 破碎机锤头_合金耐磨锤头_郑州宇耐机械工程技术有限公司 | 厌氧工作站-通用型厌氧工作站-上海胜秋科学仪器有限公司 | 并离网逆变器_高频UPS电源定制_户用储能光伏逆变器厂家-深圳市索克新能源 | 国际线缆连接网 - 连接器_线缆线束加工行业门户网站 | 粉碎机_塑料粉碎机_塑料破碎机厂家-星标机械 | 仿古建筑设计-仿古建筑施工-仿古建筑公司-汉匠古建筑设计院 | 环氧树脂地坪_防静电地坪漆_环氧地坪漆涂料厂家-地壹涂料地坪漆 环球电气之家-中国专业电气电子产品行业服务网站! | 美甲贴片-指甲贴片-穿戴美甲-假指甲厂家--薇丝黛拉 | 青岛侦探_青岛侦探事务所_青岛劝退小三_青岛调查出轨取证公司_青岛婚外情取证-青岛探真调查事务所 | 小小作文网_中小学优秀作文范文大全|