html5歷史管理

  在網易云課堂上看了妙味課堂的關于html5歷史管理的課程,在這里做一下筆記。

  單頁面或ajax局部刷新的頁面中,沒有辦法通過前一步和后一步得到歷史訪問數據,此時有兩種方法可以解決這個問題:

  1.onhashchange事件,示例代碼:

<body><input type="button" value="35選7" id="input1"><div id="div1"></div><script type="text/javascript">var oInput=document.getElementById("input1");var oDiv=document.getElementById("div1");var obj={};oInput.οnclick=function(){var number=randomNumber(35,7);oDiv.innerHTML=number;var oRd=Math.random();obj[oRd]=number;window.location.hash=oRd;}window.οnhashchange=function(){var number=obj[window.location.hash.substr(1)]||'';oDiv.innerHTML=number;}function randomNumber(alls,now){var arr=[];var newArr=[];for (var i = 1; i <= alls; i++) {arr.push(i);};for (var i = 0; i < now; i++) {newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1))};return newArr;}</script>
</body>
</html>

  

  2.history下的pushstate和popstate事件,示例代碼:  

<body><input type="button" value="35選7" id="input1"><div id="div1"></div><script type="text/javascript">var oInput=document.getElementById("input1");var oDiv=document.getElementById("div1");oInput.οnclick=function(){var number=randomNumber(35,7);oDiv.innerHTML=number;history.pushState(number,'');}window.onpopstate=function(ev){console.log(1);var number=ev.state||'';oDiv.innerHTML=number;}function randomNumber(alls,now){var arr=[];var newArr=[];for (var i = 1; i <= alls; i++) {arr.push(i);};for (var i = 0; i < now; i++) {newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1))};return newArr;}</script>
</body>
</html>

  幾點說明:

  1.hash就是url中#和它后面的內容

  2.必須把hashchange事件處理程序添加給window對象,然后url參數列表只要變化就會調用它。

  3.pushstate方法接收三個參數:數據,標題(都沒實現,實際開發中一般為‘’),地址(可選)

  4.popstate事件讀取數據用event.state

轉載于:https://www.cnblogs.com/iagw/p/6378755.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/373029.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/373029.shtml
英文地址,請注明出處:http://en.pswp.cn/news/373029.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

elementui下拉框 清空_巧妙解決element-ui下拉框選項過多的問題

1. 場景描述不知道你有沒有這樣的經歷&#xff0c;下拉框的選項很多&#xff0c;上萬個選項甚至更多&#xff0c;這個時候如果全部把數據放到下拉框中渲染出來&#xff0c;瀏覽器會卡死&#xff0c;體驗會特別不好用人會說element-ui的select有一個remote-method&#xff0c;支…

致敬詞

見義勇為致敬詞 面對災難和死神&#xff0c;你們大義凜然、知險而上&#xff0c;把平安和生機留給他人&#xff0c;把困難和危險留給自己。巍巍乎高山景行&#xff0c;錚錚然鐵骨俠風&#xff1b;壯志譜傳奇&#xff0c;熱血寫春秋。你們是&#xff1a;百姓英雄&#xff0c;平安…

MOXy作為您的JAX-RS JSON提供程序–客戶端

最近&#xff0c;我發布了如何利用EclipseLink JAXB&#xff08;MOXy&#xff09;的JSON綁定來創建RESTful服務。 在本文中&#xff0c;我將演示在客戶端利用MOXy的JSON綁定有多么容易。 MOXy作為您的JAX-RS JSON提供程序–服務器端 MOXy作為您的JAX-RS JSON提供程序–客戶端 …

經常使用計算機的孩子,常玩電腦對孩子負面影響大,家長們不容小覷!

相信不少的家庭都會備有電腦&#xff0c;人們在網絡世界里面能夠找到自己需要的東西。不僅是大人喜歡玩電腦&#xff0c;小孩也喜歡玩電腦。然而常玩電腦對孩子負面影響大嗎&#xff1f;有多大&#xff1f;一、行為問題全國青少年教育協會指出&#xff0c;5歲以下的使用電腦的孩…

基于SpringBoot的養老院管理系統

文章目錄 項目介紹主要功能截圖:部分代碼展示設計總結項目獲取方式?? 作者主頁:超級無敵暴龍戰士塔塔開 ?? 簡介:Java領域優質創作者??、 簡歷模板、學習資料、面試題庫【關注我,都給你】 ??文末獲取源碼聯系?? 項目介紹 基于SpringBoot的養老院管理系統,java項…

外呼機器人起名_智能外呼機器人,目前都有哪些公司做產品?

做智能外呼機器人的企業現在已經挺多了&#xff0c;比如各個答案中提到的各家的產品。它的市場認可度也比較高&#xff0c;大家都知道它能用于通知、回訪、問卷調查、營銷等業務場景。外呼機器人的價值很好衡量&#xff0c;用了外呼機器人后&#xff0c;能給企業賺多少錢&#…

VMware下ubuntu與Windows實現文件共享的方法

最近安裝caffe需要將Windows下文件拷貝到ubuntu16.04下&#xff0c;就進行了共享文件夾的設置&#xff0c;期間遇到一些困難&#xff0c;記錄下來&#xff0c;方便以后遇到此類問題不再困惑。 &#xff08;記錄只為更好的分享&#xff09; 言歸正傳&#xff1a; 1、首先需要在u…

前端開發流程

一般都是在我們開發一個項目之前我們會進行一個討論會&#xff0c;然后一起分析一下這個項目應該怎么去做&#xff0c;那些地方可以用最新的一些技術&#xff0c;那些技術有兼容問題&#xff0c;哪些可以實現&#xff0c;哪些不可以實現&#xff0c;這些討論完以后&#xff0c;…

TestNG和Maven配置指南

為了有用&#xff0c;自動測試應該運行得非常快。 否則&#xff0c;將不會在開發期間經常運行&#xff0c;甚至在開發人員工作站的默認配置中將被忽略。 最簡單的規則是僅編寫小型單元測試&#xff0c;該測試將模擬給定類的鄰居。 但是&#xff0c;有時在IoC容器上下文&#xf…

微型計算機廣告牌實驗報告,微型計算機實驗報告1資料.doc

實驗報告1. 實驗名稱程序編譯及調試2. 實驗目的掌握匯編語言語句格式&#xff0c;程序結構&#xff0c;上機調試步驟和各種類型程序的設計方法。了解匯編語言的基本語法&#xff0c;匯編程序的功能和匯編&#xff0c;調試過程&#xff0c;偽指令&#xff0c;匯編語言程序設計&a…

mybatis入門-新手注意問題

參數問題 在映射文件中通過parameterType指定輸入參數的類型&#xff1b;在映射文件中通過resultType指定輸出結果的類型。 占位符和拼接符問題 #{}表示一個占位符號&#xff0c;#{}接收輸入參數&#xff0c;類型可以是簡單類型&#xff0c;pojo、hashmap。 如果接收簡單類型&a…

python文件管理包_Python標準庫04 文件管理 (部分os包,shutil包)

Python標準庫04 文件管理 (部分os包&#xff0c;shutil包)在操作系統下&#xff0c;用戶可以通過操作系統的命令來管理文件&#xff0c;參考。Python 標準庫則允許我們從 Python 內部管理文件。相同的目的&#xff0c;我們有了兩條途徑。盡管在 Python 調用標準庫的方式不如操作…

Delphi Berlin 10.1 for iOS 成生 info.plist 順序改變了

在 Delphi Seattle 10 update 1 版本&#xff08;含之前版本&#xff09;&#xff0c;只要 Project > Build 會立即生成 info.plist 如果需要修改 info.plist 可以利用 TMS 提供的修改工具 Fixing on iOS 9 來修改。 在 Delphi Berlin 10.1 版本&#xff0c;順序改變了&…

MANIFEST.MF和feature.xml版本控制規則

我永遠忘記了OSIF插件和功能的 MANIFEST.MF和feature.xml中的依賴項聲明的規則是什么。 谷歌搜索經常導致沮喪而不是答案。 所以&#xff0c;因為今天我實際上找到了這些規則的簡要列表&#xff0c;所以我想在這里重新發布它們&#xff0c;并進行一些小的修改以幫助闡明。 OSGi…

遠程桌面連接時無法訪問遠程計算機的計算機屬性提示系統調用失敗,遠程過程調用失敗【應對技巧】...

喜歡使用電腦的小伙伴們一般都會遇到win7系統遠程過程調用失敗的問題&#xff0c;突然遇到win7系統遠程過程調用失敗的問題就不知道該怎么辦了&#xff0c;其實win7系統遠程過程調用失敗的解決方法非常簡單&#xff0c;按照1&#xff1a;第一步我們可以看到sql server數據庫出現…

MVC View顯示詳解(RenderBody,RenderPage,RenderSection,Partial)

一、Views文件夾 -> Shared文件夾下的 _Layout.cshtml 母版頁 RenderBody 當創建基于_Layout.cshtml布局頁面的視圖時&#xff0c;視圖的內容會和布局頁面合并&#xff0c;而新創建視圖的內容會通過_Layout.cshtml布局頁面的RenderBody()方法呈現在標簽之間。 RenderPage從…

如何在Windows系統下安裝多個Redis實例

如何在Windows系統下安裝多個Redis實例 轉載于:https://www.cnblogs.com/xiaohui1990/p/5505944.html

注冊表中shell文件不見了_win7系統注冊表中的shell文件不小心被刪除的解決方法...

我們在操作電腦的時候,win7系統注冊表中的shell文件不小心被刪除的問題對于我們來說其實是比較少見的&#xff0c;一般情況下的正常使用都不會遇到win7系統注冊表中的shell文件不小心被刪除的狀況。但在win7系統中如果由于我們個人的不當操作導致win7系統注冊表中的shell文件不…

庫卡機器人C4計算機無法啟動,KUKA-C4標準版機器人啟動時序

描述1.T1模式下選擇CELL程序&#xff0c;手動執行程序&#xff0c;注意中間路徑&#xff0c;有時機器人不在HOME點附近&#xff0c;回原點的過程中需慢速運行&#xff0c;直至到達BCO。2.松開執行鍵&#xff0c;重新按下&#xff0c;信息欄出現“運行方式錯誤”提示&#xff0c…

ADF:將UI類別與動態表單一起使用

JDev 11g R2具有有趣的新功能“ UI類別”。 它使我們可以在視圖對象定義級別上以聲明方式對VO的屬性進行分組。 例如&#xff0c;我的VEmployees視圖對象的“ UI Categories”選項卡如下所示&#xff1a; 默認情況下&#xff0c;每個視圖對象都有一個預定義的類別“默認”。 我…