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

您的位置:首頁技術文章
文章詳情頁

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

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

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

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

Back 和 Forward 方法

你可以使用 history 對象的 back 和 forward 方法來瀏覽網頁。例如,如果你想轉到上一個頁面,那么可以使用:

history.back()

同樣的,如果你想轉到下一頁,你可以使用:

history.forward()

Go 方法

如果您想向前或向后移動 n 個頁面,那么您可以使用 go 方法:

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

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

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

PushState

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

history.pushState(state, title, url)

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

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

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

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

除此之外,我們還可以為每個 URL 存儲狀態(當前頁面的數據)。在上面的例子中,你會把 '123' 存儲在 history.state 變量中,當你返回到這個頁面時,你就可以 history.state 再次拿到到這些數據。例如:

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'

每當通過 pushState 返回到之前被添加到歷史記錄的頁面時,瀏覽器就會觸發一個名為 popstate 的事件,并將 state 數據作為參數。比如在瀏覽器打開一個新標簽頁,進入某個網頁(比如 baidu.com),先監聽 popstate 事件:

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

然后調用 pushState:

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

然后按下返回按鈕,popstate 事件就會被觸發,你可以在監聽事件中查看打印出來的數據。在打印的數據中,可以找到 history.state 的值。

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

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

實例演示

現在我們做一個小的網頁應用,這個應用將實現如下功能:

顯示用戶列表 可以通過下拉框篩選“先生”和“女士” 當下列列表發生變化時,URL 也會相應的變化

我們先不關心 history API,先實現功能。下面是 html 關鍵代碼:

<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 關鍵代碼:

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’ } }}

實現后的效果如下:

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

當修改下拉列表時,為了使瀏覽器地址也發生變化,需要使用 pushSate 方法:

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

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

此時會有個問題,當我們點擊前進/后退時,瀏覽器地址變了,但對應的數據卻不對。因此,當進行前進/后退時,我們需要監聽 popstate 重新過濾數據:

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

我們還需要處理頁面刷新的問題。當刷新頁面時,歷史記錄不會改變,history.state 的狀態值也保持不變。所以我們可以從 history.state 中取出當前的狀態數據,利用 state.gender 的值就可以在 load 事件中來過慮出當前 URL 對應的用戶列表:

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

這是個簡單的示例,你也可以繼續進一步優化。今天的分享就到這里,有問題請在下面留言哦~~

以上就是如何使用 JavaScript 操作瀏覽器歷史記錄 API的詳細內容,更多關于JavaScript 操作歷史記錄api的資料請關注好吧啦網其它相關文章!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 石家庄小程序开发_小程序开发公司_APP开发_网站制作-石家庄乘航网络科技有限公司 | 压缩空气冷冻式干燥机_吸附式干燥机_吸干机_沪盛冷干机 | HDPE土工膜,复合土工膜,防渗膜价格,土工膜厂家-山东新路通工程材料有限公司 | 企典软件一站式企业管理平台,可私有、本地化部署!在线CRM客户关系管理系统|移动办公OA管理系统|HR人事管理系统|人力 | 宝宝药浴-产后药浴-药浴加盟-艾裕-专注母婴调养泡浴 | 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 工业胀紧套_万向节联轴器_链条-规格齐全-型号选购-非标订做-厂家批发价格-上海乙谛精密机械有限公司 | 激光内雕_led玻璃_发光玻璃_内雕玻璃_导光玻璃-石家庄明晨三维科技有限公司 激光内雕-内雕玻璃-发光玻璃 | 四川职高信息网-初高中、大专、职业技术学校招生信息网 | 沈阳真空机_沈阳真空包装机_沈阳大米真空包装机-沈阳海鹞真空包装机械有限公司 | 锂辉石检测仪器,水泥成分快速分析仪-湘潭宇科分析仪器有限公司 | ALC墙板_ALC轻质隔墙板_隔音防火墙板_轻质隔墙材料-湖北博悦佳 | 尊享蟹太太美味,大闸蟹礼卡|礼券|礼盒在线预订-蟹太太官网 | 振动筛-交叉筛-螺旋筛-滚轴筛-正弦筛-方形摇摆筛「新乡振动筛厂家」 | 博博会2021_中国博物馆及相关产品与技术博览会【博博会】 | 高速龙门架厂家_监控杆_多功能灯杆_信号灯杆_锂电池太阳能路灯-鑫世源照明 | 安驭邦官网-双向万能直角铣头,加工中心侧铣头,角度头[厂家直销] 闸阀_截止阀_止回阀「生产厂家」-上海卡比阀门有限公司 | 广东教师资格网-广东教师资格证考试网| 四川成人高考_四川成考报名网 | 移动厕所租赁|移动卫生间|上海移动厕所租赁-家瑞租赁 | 洛阳防爆合格证办理-洛阳防爆认证机构-洛阳申请国家防爆合格证-洛阳本安防爆认证代办-洛阳沪南抚防爆电气技术服务有限公司 | 万博士范文网-您身边的范文参考网站Vanbs.com | 有机肥设备生产制造厂家,BB掺混肥搅拌机、复合肥设备生产线,有机肥料全部加工设备多少钱,对辊挤压造粒机,有机肥造粒设备 -- 郑州程翔重工机械有限公司 | 螺旋压榨机-刮泥机-潜水搅拌机-电动泥斗-潜水推流器-南京格林兰环保设备有限公司 | ORP控制器_ORP电极价格-上优泰百科 | 东莞螺丝|东莞螺丝厂|东莞不锈钢螺丝|东莞组合螺丝|东莞精密螺丝厂家-东莞利浩五金专业紧固件厂家 | 专业生产动态配料系统_饲料配料系统_化肥配料系统等配料系统-郑州鑫晟重工机械有限公司 | 雷达液位计_超声波风速风向仪_雨量传感器_辐射传感器-山东风途物联网 | 耐破强度测试仪-纸箱破裂强度试验机-济南三泉中石单品站 | 肉嫩度仪-凝胶测试仪-国产质构仪-气味分析仪-上海保圣实业发展有限公司|总部 | 27PR跨境电商导航 | 专注外贸跨境电商 | 组织研磨机-高通量组织研磨仪-实验室多样品组织研磨机-东方天净 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | 引领中高档酒店加盟_含舍·美素酒店品牌官网 | 乐考网-银行从业_基金从业资格考试_初级/中级会计报名时间_中级经济师 | 自动化生产线-自动化装配线-直流电机自动化生产线-东莞市慧百自动化有限公司 | 螺钉式热电偶_便携式温度传感器_压簧式热电偶|无锡联泰仪表有限公司|首页 | 气体检测仪-氢气检测仪-可燃气体传感器-恶臭电子鼻-深国安电子 | 培训中心-海南香蕉蛋糕加盟店技术翰香原中心官网总部 | 山东商品混凝土搅拌楼-环保型搅拌站-拌合站-分体仓-搅拌机厂家-天宇 | 北京银联移动POS机办理_收银POS机_智能pos机_刷卡机_收银系统_个人POS机-谷骐科技【官网】 | 北京模型公司-军事模型-工业模型制作-北京百艺模型沙盘公司 |