第89天:HTML5中 访问历史、全屏和网页存储API
一、访问历史 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>
第89天:HTML5中 访问历史、全屏和网页存储API相关推荐
- apple设置中如果变全屏_如何从Apple Batterygate结算中获得25
apple设置中如果变全屏 The class-action lawsuit was sparked after Apple admitted in December 2017 it had been ...
- excel2016html,Excel2016中切换至全屏视图的两种方法
在Excel工作表的使用过程中,有时因为工作表中的内容较多,无法在当前屏幕中完整显示,这时切换到全屏视图来查看要更方便一些.在Excel 2016中切换至全屏视图,主要有以下两种方法: 方法一:使用快 ...
- html中iframe全屏显示,如何让iframe中的元素全屏
最近项目中iframe让人恶心,iframe只要一出现,写的正常代码就容易出现各种bug,比如iframe中的元素不能document.getElementBy...正常获取,比如iframe中的元素 ...
- iOS wkWebview播放HTML5 video视频 自动全屏问题解决
HTML5使用video播放视频,限制视频的尺寸,但在ios中出现的全屏问题 使用html5 的video标签播放视频的时候,限制视频的尺寸,在android上是没有问题的,但是在ios上发现,视频没 ...
- html5播放器自动全屏,HTML5 video播放器全屏(fullScreen)实现的方法
这篇文章主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下 首先来说,这个标题具有误导性,但这样设置改标题也是主要因为vid ...
- html5实现浏览器自动全屏,[JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...
- android中布局全屏,怎么在Android 应用中实现一个全屏与非全屏功能
怎么在Android 应用中实现一个全屏与非全屏功能 发布时间:2020-12-04 17:31:45 来源:亿速云 阅读:135 作者:Leah 怎么在Android 应用中实现一个全屏与非全屏功能 ...
- JS全屏代码,解决PDF.js在iframe中部分浏览器全屏功能错误
JS全屏代码,解决PDF.js在iframe中部分浏览器全屏功能错误 PDF.js在iframe模式在火狐浏览器中按钮被屏蔽 经分析,viewer.js 发现了判断逻辑 debug发现 第二个判断后为 ...
- VMware 中 Ubuntu 不能全屏
VMware 中 Ubuntu 不能全屏时, 首先需要安装 VMware Tools,安装步骤如下: 要装载 CD 映像并解压缩内容,请按以下步骤操作: 1.启动此虚拟机. 2.使用具有管理员权限或 ...
最新文章
- Android 导致OOM的常见原因
- 如何修复“ android.os.NetworkOnMainThreadException”?
- Labview-浅谈Labview中VISA的设计
- matlab绘制横向柱状图
- Lazada2022新开店入驻流程及费用
- YOLOv3最全复现代码合集(含PyTorch/TensorFlow和Keras等)
- ZOJ 2112 Dynamic Rankings
- Oracle入门(十四.3)之创建PL / SQL块
- 深度学习三种分割定义
- MySQL类型float double decimal的区别
- 【渝粤题库】陕西师范大学152112 网络信息检索与利用
- 计算机组成原理课题讨论——编译器对程序的影响
- 时空序列预测之Memory In Memory: A Predictive Neural Network for Learning Higher-OrderNon-Stationarity
- Android 去掉Power键屏保功能,但保留长按关机功能。
- lhgdialog的弹出框操作
- 正点原子IMX6ULL开发板禁用出厂QT界面
- 【附源码】计算机毕业设计SSM我的大学电子相册
- centos7 安装Apache、PHP、MariaDB并修改相关默认端口
- 脚本记录:移动端图片扩大缩小
- MySQL 基础学习笔记(1)
热门文章
- [emacs] Python代码补全的各种方法介绍以及对比
- 闲来无事,仿了一个百度杀毒主界面
- 对话框应用程序的DoModal()源代码
- 大数据之-Hadoop完全分布式_完全分布式配置总结---大数据之hadoop工作笔记0040
- Seata分布式事务问题由来---微服务升级_SpringCloud Alibaba工作笔记0056
- 微服务升级_SpringCloud Alibaba工作笔记0018---Nacos之服务注册中心对比提升
- 微服务升级_SpringCloud Alibaba工作笔记0015---Nacos安装
- STM32工作笔记0051---NVIC中断优先级管理
- 项目业务工作笔记001---发改委职责
- Ui学习笔记---EasyUI的EasyLoader组件源码分析