第89天：HTML5中 訪問歷史、全屏和網頁存儲API
阿新 • • 發佈：2017-11-20
全屏顯示 cal img 一份 圖片 def api load replace
一、訪問歷史 API
通過history對象實現前進、後退和刷新之類的操作
history新增的兩個方法history.replaceState()和history.pushState()方法屬於HTML5瀏覽器新增的屬性，所以IE9以下的是不支持的。
1、history.replaceState() ；顧名思義就是替換的意思，所以它的作用就是替換當前地址欄的url
history.replaceState(data,"頁面的title","需要改變的url") ；接收三個參數
2、history.pushState() ；看到push大家首先應該想到的是數組，沒錯，這個方法就是往瀏覽器的history裏壓入一條url，就像數據結構裏的棧一樣，這個壓入的url會在棧
的最頂端，當你點擊瀏覽器的前進或者倒退按鈕時，便會拿出棧頂的url來定位，從而達到改變history的作用但是並不刷新！
3、popstate事件
當history實體被改變時，popstate事件將會發生。如果history實體是有pushState和replaceState方法產生的，popstate事件的state屬性會包含一份來自history實體的state對象的拷貝
4、讀取當前的state
當頁面加載時，它可能會有一個非空的state對象。這可能發生在當頁面設置一個state對象(使用pushState或者replaceState)之後用戶重啟了瀏覽器。當頁面重新加載，頁面將收到onload事件，但不會有popstate
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>history API</title> 6 <style> 7 html,body{ 8 height: 100%; 9 overflow: hidden; 10 margin: 0; 11 padding: 0; 12 } 13 aside{ 14 background-color: #c0c0c0; 15 width: 220px; 16 float: left; 17 height: 100%; 18 } 19 aside ul{ 20 font-size: 20px; 21 line-height: 2; 22 } 23 aside ul li{ 24 cursor: pointer; 25 } 26 article{ 27 background-color: #f5f5f5; 28 margin-left: 220px; 29 padding: 20px; 30 overflow: scroll; 31 height: 100%; 32 width: 300px; 33 font-size: 20px; 34 } 35 </style> 36 </head> 37 <body> 38 <aside> 39 <ul id="list"></ul> 40 </aside> 41 <article> 42 <p id="content"></p> 43 </article> 44 </body> 45 <script src="data.js"></script> 46 <script> 47 (function(){ 48 var listElement=document.querySelector(‘#list‘); 49 for(var title in data){ 50 var liElement=document.createElement(‘li‘); 51 liElement.innerHTML=title; 52 liElement.setAttribute(‘data-title‘,title);//自定義屬性 53 listElement.appendChild(liElement); 54 } 55 var liElements=document.querySelectorAll(‘#list>li‘); 56 var content=document.querySelector(‘#content‘); 57 //註冊每一個元素事件 58 for(var i=0;i<liElements.length;i++){ 59 liElements[i].addEventListener(‘click‘,function(){ 60 //拿到被點擊元素的名字 title 61 var title=this.dataset[‘title‘];//通過dataset獲取 62 content.innerHTML=data[title];//賦值 63 //操作歷史記錄 64 if(window.history&&history.pushState){ 65 //添加一個新的歷史記錄 66 history.pushState(title,‘title沒有任何瀏覽器支持‘,‘?t=‘+title); 67 }else{ 68 console.log(‘不支持‘); 69 } 70 }); 71 } 72 //當我們在偽造訪問歷史中前進或後退時會執行一個popstate事件 73 window.addEventListener(‘popstate‘,function(e){ 74 content.innerHTML=data[e.state]; 75 }); 76 //window.location="http://www.baidu.com"; 77 //第一次請求過來 獲取地址欄中的t參數 78 var title=window.location.search.split(‘=‘)[1];//用=分割 79 if(title){//有值 80 console.log(decodeURI(title));//decodeURI 從URL編碼轉換到之前的狀態 81 content.innerHTML=data[decodeURI(title)]; 82 } 83 })(); 84 </script> 85 </html>
二、全屏顯示 API
requestFullScreen();全屏顯示方法
1 <script> 2 (function(){
//點擊圖片讓網頁全屏顯示 3 var img=document.querySelector(‘#img_full‘); 4 img.addEventListener(‘click‘,function(e){ 5 if(document.body.webkitRequestFullScreen){//谷歌 6 document.body.webkitRequestFullScreen(); 7 }else if(document.body.mozRequestFullScreen){//火狐 8 document.body.mozRequestFullScreen(); 9 }else{ 10 document.body.requestFullScreen();//其他 11 e.preventDefault(); 12 } 13 14 }); 15 //點擊h3標簽，讓p標簽裏的內容全屏展示 16 var h3=document.querySelector(‘#title_1‘); 17 var p=document.querySelector(‘#content_1‘); 18 h3.addEventListener(‘click‘,function(e){ 19 if(p.webkitRequestFullScreen){ 20 p.webkitRequestFullScreen(); 21 } 22 }) 23 })() 24 25 </script>
三、網頁存儲
- Application Cache 讓網頁離線訪問的技術
- getItem方式獲取一個不存在的鍵 ，返回空字符串
txtValue.value = localStorage.getItem(‘key1‘); - []方法 返回undefined
txtValue.value = localStorage[‘key1‘];
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Web Storage</title> 7 <meta name="author" content="汪磊"> 8 </head> 9 10 <body> 11 <div> 12 <textarea id="txt_value" cols="80" rows="10"></textarea> 13 </div> 14 <button id="btn_set">存儲</button> 15 <button id="btn_get">讀取</button> 16 <script> 17 if (!window.localStorage) { 18 alert(‘不支持LocalStorage‘); 19 } else { 20 var btnSet = document.querySelector(‘#btn_set‘);//獲取按鈕 21 var btnGet = document.querySelector(‘#btn_get‘); 22 var txtValue = document.querySelector(‘#txt_value‘); 23 btnGet.addEventListener(‘click‘, function() { 24 // txtValue.value = localStorage.getItem(‘key1‘); 25 txtValue.value = localStorage[‘key1‘];//會話用sessionStorage 26 }); 27 btnSet.addEventListener(‘click‘, function() { 28 // localStorage.setItem(‘key1‘, txtValue.value); 29 localStorage[‘key1‘] = txtValue.value; 30 }); 31 } 32 </script> 33 </body> 34 35 </html>
第89天：HTML5中 訪問歷史、全屏和網頁存儲API