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

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

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

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

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

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

Back 和 Forward 方法

你可以使用 history 對(duì)象的 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 對(duì)象的 URL 棧頂部。語法如下:

history.pushState(state, title, url)

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

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

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

執(zhí)行上面的代碼后,它會(huì)將頁面地址欄中的 URL 改為 baidu.com/new-url,同時(shí)將 URL 添加到 history 對(duì)象中。此時(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 的值。

注冊(cè) 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í),瀏覽器地址變了,但對(duì)應(yīng)的數(shù)據(jù)卻不對(duì)。因此,當(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 對(duì)應(yīng)的用戶列表:

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

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

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

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 路面机械厂家| 花纹铝板,合金铝卷板,阴极铝板-济南恒诚铝业有限公司 | 螺纹三通快插接头-弯通快插接头-宁波舜驰气动科技有限公司 | 12cr1mov无缝钢管切割-15crmog无缝钢管切割-40cr无缝钢管切割-42crmo无缝钢管切割-Q345B无缝钢管切割-45#无缝钢管切割 - 聊城宽达钢管有限公司 | 光纤测温-荧光光纤测温系统-福州华光天锐光电科技有限公司 | 实木家具_实木家具定制_全屋定制_美式家具_圣蒂斯堡官网 | 并网柜,汇流箱,电控设备,中高低压开关柜,电气电力成套设备,PLC控制设备订制厂家,江苏昌伟业新能源科技有限公司 | 蓝莓施肥机,智能施肥机,自动施肥机,水肥一体化项目,水肥一体机厂家,小型施肥机,圣大节水,滴灌施工方案,山东圣大节水科技有限公司官网17864474793 | 冷油器,取样冷却器,热力除氧器-连云港振辉机械设备有限公司 | 岩棉板|岩棉复合板|聚氨酯夹芯板|岩棉夹芯板|彩钢夹芯板-江苏恒海钢结构 | 石油/泥浆/不锈钢防腐/砂泵/抽砂泵/砂砾泵/吸砂泵/压滤机泵 - 专业石油环保专用泵厂家 | 振动筛,震动筛,圆形振动筛,振动筛价格,振动筛厂家-新乡巨宝机电 蒸汽热收缩机_蒸汽发生器_塑封机_包膜机_封切收缩机_热收缩包装机_真空机_全自动打包机_捆扎机_封箱机-东莞市中堡智能科技有限公司 | 车充外壳,车载充电器外壳,车载点烟器外壳,点烟器连接头,旅行充充电器外壳,手机充电器外壳,深圳市华科达塑胶五金有限公司 | 选宝石船-陆地水上开采「精选」色选机械设备-青州冠诚重工机械有限公司 | 企小优-企业数字化转型服务商_网络推广_网络推广公司 | 3A别墅漆/3A环保漆_广东美涂士建材股份有限公司【官网】 | 无纺布包装机|径向缠绕包装机|缠绕膜打包机-上海晏陵智能设备有限公司 | 电动高尔夫球车|电动观光车|电动巡逻车|电动越野车厂家-绿友机械集团股份有限公司 | 都江堰招聘网-都江堰人才网 都江堰人事人才网 都江堰人才招聘网 邢台人才网_邢台招聘网_邢台123招聘【智达人才网】 | 深圳市超时尚职业培训学校,培训:月嫂,育婴,养老,家政;化妆,美容,美发,美甲. | 无尘烘箱_洁净烤箱_真空无氧烤箱_半导体烤箱_电子防潮柜-深圳市怡和兴机电 | 安徽千住锡膏_安徽阿尔法锡膏锡条_安徽唯特偶锡膏_卡夫特胶水-芜湖荣亮电子科技有限公司 | 江苏南京多语种翻译-专业翻译公司报价-正规商务翻译机构-南京华彦翻译服务有限公司 | 湖北省煤炭供应链综合服务平台 | 宿舍管理系统_智慧园区系统_房屋/房产管理系统_公寓管理系统 | 工业洗衣机_工业洗涤设备_上海力净工业洗衣机厂家-洗涤设备首页 bkzzy在职研究生网 - 在职研究生招生信息咨询平台 | 干式变压器厂_干式变压器厂家_scb11/scb13/scb10/scb14/scb18干式变压器生产厂家-山东科锐变压器有限公司 | 家庭教育吧-在线家庭教育平台,专注青少年家庭教育 | 定硫仪,量热仪,工业分析仪,马弗炉,煤炭化验设备厂家,煤质化验仪器,焦炭化验设备鹤壁大德煤质工业分析仪,氟氯测定仪 | 冷柜风机-冰柜电机-罩极电机-外转子风机-EC直流电机厂家-杭州金久电器有限公司 | 香蕉筛|直线|等厚|弧形|振动筛|香蕉筛厂家-洛阳隆中重工 | 自动螺旋上料机厂家价格-斗式提升机定制-螺杆绞龙输送机-杰凯上料机 | 沥青车辙成型机-车托式混凝土取芯机-混凝土塑料试模|鑫高仪器 | 微信聊天记录恢复_手机短信删除怎么恢复_通讯录恢复软件下载-快易数据恢复 | 仓储笼_金属箱租赁_循环包装_铁网箱_蝴蝶笼租赁_酷龙仓储笼租赁 测试治具|过炉治具|过锡炉治具|工装夹具|测试夹具|允睿自动化设备 | 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | 北京网站建设|北京网站开发|北京网站设计|高端做网站公司 | 软文推广发布平台_新闻稿件自助发布_媒体邀约-澜媒宝 | 山东成考网-山东成人高考网| 无锡门窗-系统门窗-阳光房-封阳台-断桥铝门窗厂[窗致美] | 硫化罐-胶管硫化罐-山东鑫泰鑫智能装备有限公司 |