zoukankan      html  css  js  c++  java
  • H5中的history方法Api介绍

      最近公司在做一个微信公众号,看了项目源码,看到项目中用到了history的Api来进行控制浏览器的历史记录及前进/后退键;

      下面来跟大家一起来捋捋history的Api方法和使用:

      history.pushState(data,title,url):在浏览器中新增一条历史记录;

      data会在onpopstate事件触发时作为参数传递过去,title为页面标题,url为页面地址;

       history.replaceState(data,title,url):在浏览器中替换当前历史记录;

      data会在onpopstate事件触发时作为参数传递过去,title为页面标题,url为页面地址;

       history.length():当前历史列表中的历史记录条数;

          window.onpopstate:实际上popstate是一个浏览器内置的点击事件,响应pushState和replaceState的触发调用;

      

        //当页面加载时   
         window.onload=function(){
            pushHistory();
        //新增浏览器事件监听(popstate为事件名,触发事件执行function)
          window.addEventListener("popstate",function(e){
              //括号里面应为业务代码(要做的事情)   
            },false);
          function pushHistory(){
        //定义对象
    var state={ title:“title”, url:"#" };
        //调用history.pushState方法往浏览器历史记录上新增一条历史记录 window.history.pushState(state,
    "title","#"); } }

      history.back(-1):返回到当前页的上一页(原页面表单中的内容会保留)

       history.back(0):页面刷新

         history.back(1):当前页前进一页

         history.go(-1): 返回到当前页的上一页(原页面表单中的内容会丢失,效果基本和history.back(-1)一样)

         history.forward():当前页面前进一页(和history.back(1)效果一样)

      声名:history方法可以直接调用,例:history.pushState(),也可以用window.history.pushState()来调用。因为history是属于浏览器中的子对象,两种调用方法都是生效的;

    本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
  • 相关阅读:
    windows 10 下部署WCF 一些细节
    系统提示 由于系统缓冲区空间不足或队列已满,不能执行套接字上的操作。
    zookeeper常用命令
    zookeeper安装与配置
    Java访问者模式
    总结设计模式—(大话设计模式下篇)
    总结设计模式—(大话设计模式中篇)
    总结设计模式—(大话设计模式上篇)
    Java中间缓存变量机制
    解释模式
  • 原文地址:https://www.cnblogs.com/dengyao-blogs/p/10653078.html
Copyright © 2011-2022 走看看