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

简介: 一、访问历史 API通过history对象实现前进、后退和刷新之类的操作history新增的两个方法history.replaceState()和history.pushState()方法属于HTML5浏览器新增的属性,所以IE9以下的是不支持的。

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

三、网页存储

  1. Application Cache 让网页离线访问的技术
  2. getItem方式获取一个不存在的键 ,返回空字符串   
    txtValue.value = localStorage.getItem('key1');
  3. []方法 返回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>

 

相关文章
|
3月前
|
JSON 应用服务中间件 API
利用Grafana的API Key+Nginx反向代理实现Grafana免登录访问
利用Grafana的API Key+Nginx反向代理实现Grafana免登录访问
80 1
|
6月前
|
安全 Java API
解决 Swagger API 未授权访问漏洞:完善分析与解决方案
Swagger 是一个用于设计、构建、文档化和使用 RESTful 风格的 Web 服务的开源软件框架。它通过提供一个交互式文档页面,让开发者可以更方便地查看和测试 API 接口。然而,在一些情况下,未经授权的访问可能会导致安全漏洞。本文将介绍如何解决 Swagger API 未授权访问漏洞问题。
|
1月前
|
存储 分布式计算 API
adb spark的lakehouse api访问内表数据,还支持算子下推吗
【2月更文挑战第21天】adb spark的lakehouse api访问内表数据,还支持算子下推吗
107 2
|
1月前
|
数据采集 JavaScript API
第三方系统访问微搭低代码的后端API
第三方系统访问微搭低代码的后端API
|
1月前
|
移动开发 API HTML5
HTML5响应式自动采集API壁纸系统源码自适应手机端
HTML5响应式自动采集API壁纸系统源码自适应手机端
39 11
HTML5响应式自动采集API壁纸系统源码自适应手机端
|
3月前
|
安全 API 网络安全
Github不再支持基于密码的API访问
Github不再支持基于密码的API访问
39 0
|
4月前
|
Kubernetes API 网络架构
k8s学习-CKS真题-启用API Server认证,禁止匿名访问
k8s学习-CKS真题-启用API Server认证,禁止匿名访问
61 0
|
4月前
|
API Windows
解决echarts.apache.org官网不能访问的问题(主要是用于查看配置项API参数细节说明)
解决echarts.apache.org官网不能访问的问题(主要是用于查看配置项API参数细节说明)
|
4月前
|
JSON API 数据格式
拼多多根据ID取商品详情 API 是否支持移动端访问?
API的URL和端口 拼多多根据ID取商品详情 API 的URL和端口与计算机端相同,您可以使用相同的URL和端口在移动设备上发送请求。请确保您的移动设备可以连接到互联网,并且可以访问拼多多的API服务器。
|
4月前
|
存储 JavaScript 前端开发
使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序
使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序
66 0