一、访问历史 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事件。然而，如果你读取history.state属性，将在popstate事件发生后得到这个state对象
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>
