首页 > 编程语言 >细说JavaScript BOM之HTML5新特性

细说JavaScript BOM之HTML5新特性

时间:2024-01-19 21:26:59浏览次数:21  
标签:缓存 浏览器 url JavaScript BOM pushState history HTML5

1、applicationCache对象

什么是Application Cache呢?HTML5引入了应用程序缓存技术,意味着Web应用可进行缓存,并在没有网络的情况下使用,通过创建cache
manifest文件,可以轻松的创建离线应用。

Application Cache带来的优势:

  • 1.离线浏览
  • 2、提升页面载入速度
  • 3、降低服务器压力

需要注意的是:如果用户使用的某个页面使用了applicationCache对象进行缓存,如果用户多次刷新页面都没有改变,就不尽如人意了

2、haschange对象

// HTML5引入了对历史的管理,更新了history对象,让管理历史状态更加方便。
// 通过haschange对象可以知道url的参数什么时候发生了变化,也就是什么时候该有所反应。
// 通过状态管理的API,能够在不加载新页面的情况下改变浏览器的url。这就需要使用浏览器的
// histor.pushState()方法,这个方法接受三个参数

// 语法
// 参数1: 要缓存的内容
// 参数2: 标题(一般写一个空字符)
// 参数3: 地址(可选)
history.pushState({name:"menglong"},"","li.html");

// 执行history.pushState()方法后新的状态信息就会被加入历史状态栈,而浏览器地址栏也会变成新的相对url,但是浏览器并不会向服务器发送请求,既是历史状态改变之后执行location.href也会返回与地址栏中相同的地址

标签:缓存,浏览器,url,JavaScript,BOM,pushState,history,HTML5
From: https://www.cnblogs.com/zhishunet/p/17975638

相关文章

  • 细说JavaScript BOM之window常用子对象
    一、locationlocation翻译过来就是位置的意思,打开浏览器窗口大家可以看到导航栏上有一个URL地址。//例如https://www.zhishunet.com//分心可知,它使用的网络协议是https服务器名称是www,zhishunet.comlocation常用对象属性属性描述search设置或返回从问好(?......
  • JavaScript DOM可以做什么?
    1、通过id获取标签元素DOM是文档对象模型,它提供了一些属性和方法来方便我们操作document对象,比如getElementById()方法可以通过某个标签元素的id来获取这个标签元素//用法window.document.getElementById('id');//例子<!DOCTYPEhtml><html><head><metacharset="U......
  • SOLIDWORKS插件SolidKits.BOMs工具之属性修改
    SOLIDWORKS模型的属性信息可以写在自定义属性中,也可以写在配置特定属性中,这些我们在制作SOLIDWORKS模板的时候就已经定义好了,如果随着企业的发展,属性名做了调整,就可以使用SOLIDWORKS属性修改插件-SolidKits.BOMs工具来批量完成属性名的修改,比如将代号改为图号,将备注属性删除等操作......
  • 深入理解JavaScript堆栈、事件循环、执行上下文、作用域以及闭包
    合集-JavaScript进阶系列(5) 1.JavaScriptthis绑定详解01-092.JavaScriptapply、call、bind函数详解01-093.JavaScriptforEach方法跳出循环01-024.深入理解JavaScript堆栈、事件循环、执行上下文和作用域以及闭包01-105.JavaScript到底应不应该加分号?JavaScript自......
  • javascript中的undefined可以被重写
    众所周知,当声明一个变量,并且没有给赋值的情况下,它的初始值是 undefined。但是在javascript中,怎么检查一个值是否为 undefined 呢?在现代浏览器中,你可以安全的直接比较将变量是与 undefined 进行比较if(name===undefined){//...}一些人反对直接使用 undefined......
  • Js(Javascript)的apply call 和bind区别
    ​ apply、call和bind是用于调用函数的三种不同方式,它们的主要区别在于函数调用时的上下文(this关键字)以及参数传递的方式。call和apply是用于立即调用函数并设置this上下文的方法,它们的主要区别在于参数传递的方式。bind不会立即执行函数,而是创建一个新的函数,将this......
  • JavaScript数组使用方法
    constarr=[4,3,2,1];/*操作数组*///在末尾添加元素arr.push(5);//结果:[4,3,2,1,5]//在开头添加元素arr.unshift(0);//结果:[0,4,3,2,1,5]//移除最后一个元素arr.pop();//结果:[0,4,3,2,1]//移除第一个元素arr.shift();//结果:[4,3,2......
  • JavaScript到底应不应该加分号?JavaScript自动插入分号规则详解
    JavaScript提供了automaticsemicoloninsertion(ASI)自动插入分号规则,在不加分号的情况下,会自动补充分号来分隔不同语句。导致在继左大括号换行、tab和space圣战后,前端又出现了一场战争。并且随着那个男人加入这场讨论之后,关于是否应该加分号的讨论更是激烈了。ASI自......
  • Javascript中addEventListener的3个参数
    //例document.addEventListener('click',()=>{//dosomething...},false) 1.addEventListener,接收3个参数第一个参数event:监听的事件名称第二个参数是函数:需要执行的事件第三个参数是useCapture(变量):用来判断是捕获还是冒泡 2.第三个参数为userCapyu......
  • JavaScript自建文档
    JavaScript温习文档JavaScript的使用场景网页特效发(node.js)桌面程序(electron)app(cordova)硬件控制(物联网)游戏开发(cocos2d-js)浏览器执行js过程渲染引擎:解析html和css,chrome用的blink,老版本用的webkitjs引擎:也叫js解析器,用来读取网页中的JavaScript......