一,访问历史API
通过历史对象实现前进,后退和刷新之类的操作
历史上新增的两个方法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>