在线扩展包 战友等：各位战友，MS Word 是什么意思

来源：蜘蛛抓取(WebSpider) 时间：2017-12-27 20:33 标签： 战友无声在线观看免费
图解用HTML5的popstate如何玩转浏览器历史记录 - 推酷
图解用HTML5的popstate如何玩转浏览器历史记录
一、popstate用来做什么的？
简而言之就是HTML5新增的用来控制浏览器历史记录的api。
二、过去如何操纵浏览器历史记录？
window.history对象，该对象上包含有length和state的两个值，在它的__proto__上继承有back、forward、go等几个功能函数
在popstate之前，我们可以利用back、forward、go对history进行后退和前进操作。
history.back(); (后退一步，使用history.go(-1)也可实现后退效果)
弊端：只能操作前进后退，但是无法控制前进后要去哪，history.length都只会维持原来的状态
三、popstate的怎么用？
HTML5的新API扩展了window.history，使历史记录点更加开放了。可以存储当前历史记录点pushState、替换当前历史记录点replaceState、监听历史记录点popstate。
pushState、replaceState两者用法差不多。
使用方法：
history.pushState(data,title,url);
//其中第一个参数data是给state的值；第二个参数title为页面的标题，但当前所有浏览器都忽略这个参数，传个空字符串就好；第三个参数url是你想要去的链接；
replaceState用法类似，例如：history.replaceState(&首页&,&&,location.href+ &#news&);
两者区别：pushState会改变history.length，而replaceState不改变history.length
通过下图我们可以对比看出pushState和replaceState的差别（注意看history.length的变化）：
&!DOCTYPE html&
&head lang=&en&&
&meta charset=&UTF-8&&
&title&图解用HTML5的popstate如何玩转浏览器历史记录&/title&
&span class=&js-news&&新闻&/span&
&span class=&js-music&&音乐&/span&
var locationHref = location.
document.addEventListener(&click&, function (event) {
var target = event.
if (target.className == &js-news&) {
history.pushState(&首页&, &&, locationHref + &#news&);
} else if (target.className == &js-music&) {
history.pushState(&音乐&, &&, locationHref + &#music&);
document.addEventListener(&click&,function(event){
var target = event.
if(target.className == &js-news&){
history.replaceState(&首页&,&&,locationHref + &#news&);
}else if(target.className == &js-music&){
history.replaceState(&音乐&,&&,locationHref + &#music&);
window.addEventListener(&popstate&, function () {
console.log(history.state);
四、监听浏览器状态（popstate）变化事件
可以理解为监听浏览器后退、前进的操作，只要后退或者前进就会触发。在上面的demo中，我们预先做了如下操作：打开页面→点击“新闻”→点击“音乐”→再点击“新闻”，产生了4个history记录。然后监听浏览器后退和前进的状态变化，如下图所示：
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致onpopstate浏览器点击回退按钮时触发的事件
1、onpopstate事件，点击后退按钮(或者在中调用history.back()方法)时触发；
2、hash 属性：可对URL的锚部分（从 # 号开始的部分）进行操作（可读可写）；
关于hash的链接
微信页面，在当前页面点击某处时，弹出一个覆盖整个手机屏幕的层，弹出这个层以后，点击微信屏幕的返回按钮时，隐藏弹出层，而不退出当前页面！
解决方案：
在点击事件发生的时候利用hash属性给URL加上锚点，展示弹出层，而点击返回按钮后，去掉URL锚点，隐藏弹出层；点击返回按钮将触发onpopstate事件；为什么要给URL加锚点？需求描述的所有操作都在同一个页面上，所以如果不在URL上添加锚点，点击展示弹出层后，用户点击微信返回按钮，将退出当前页面！
$(".btn").click(function(){
location.hash = "win";//给url加上锚点，此锚点会自动加载到url的
$(".window").show();
$("#search").focus();
checkLocation方法检测URL上是否有锚点win，有锚点则展示弹出层，反之，则隐藏弹出层
function checkLocation(){
//hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。
if(location.hash.indexOf("#win")&-1){
$(".window").show();
$(".window").hide();
//popstate事件在浏览器操作时触发, 比如点击后退按钮(或者在JavaScript中调用history.back()方法).
window.onpopstate = function() {
checkLocation();
本文转载自 夏天的甲虫 , 原文链接： , 转载请保留本声明！
每一个你不满意的现在，都有一个你没有努力的曾经。
Copyright (C) &&
&&Powered by&

我要回帖

更多关于 战友无声在线观看免费 的文章

 

随机推荐