前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第89天:HTML5中 访问历史、全屏和网页存储API

第89天:HTML5中 访问历史、全屏和网页存储API

作者头像
半指温柔乐
发布2018-09-11 11:16:57
1.1K0
发布2018-09-11 11:16:57
举报
文章被收录于专栏:前端知识分享

一、访问历史 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对象

代码语言:javascript
复制
 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();全屏显示方法

代码语言:javascript
复制
 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>

三、网页存储

  1. Application Cache 让网页离线访问的技术
  2. getItem方式获取一个不存在的键 ,返回空字符串    txtValue.value = localStorage.getItem('key1');
  3. []方法 返回undefined txtValue.value = localStorage['key1'];
代码语言:javascript
复制
 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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-11-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、访问历史 API
    • 4、读取当前的state
    • 二、全屏显示 API
    • 三、网页存储
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档