美文网首页
history 对象详解

history 对象详解

作者: believedream | 来源:发表于2017-04-06 18:10 被阅读0次

很多人对history对象不是特别了解,今天我总结了下,这个也是面试的重点。
基础的history对象的方法:
在w3c文档中我们很容易学习到一些的基础用法,在这里我也总结下。

Paste_Image.png

这个属性和用法比较简单,在这里就不贴出案例了。

如果想回退两步可以

Paste_Image.png

接下来我介绍下其他的history对象的属性和方法:
history.pushState(state,title,url)
history.replaceState 与history.pushState一样
onpopstate: 浏览器的前进与后退,会触发window.onpopstate事件
参数介绍

  • state对象 –state对象是一个JavaScript对象,它关系到由pushState()方法创建出来的新的history实体。用以存储关于你所要插入到历史 记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象,这个对象的最大存储空间为640k。如果大于这个数 值,则pushState()方法会抛出一个异常。如果确实需要更多的空间来存储,请使用本地存储。
  • title—firefox现在回忽略这个参数,虽然它可能将来会被使用上。而现在最安全的使用方式是传一个空字符串,以防止将来的修改。或者可以传一个简短的标题来表示state
  • URL—这个参数用来传递新的history实体的URL,注意浏览器将不会在调用pushState()方法后加载这个URL。但也许会过一会尝试加载这个URL。比如在用户重启了浏览器后,新的url可以不是绝对路径。如果是相对路径,那么它会相对于现有的url。新的url必须和现有的url同域,否则pushState()将抛出异常。这个参数是选填的,如果为空,则会被置为document当前的url。

在onpopstate事件中的事件对象 有。popstate事件的(e.state)属性会包含一份来自history实体的state对象的拷贝.

演示代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
<ul class="nav">
  <li data-hash="index">首页</li>
  <li data-hash="news">新闻</li>
  <li data-hash="sports">体育</li>
</ul>
<div class="cont">
  <div data-content="index">首页内容</div>
  <div data-content="news">新闻内容</div>
  <div data-content="sports">体育内容</div>
</div>
<script>
  window.onload=function(){
    var oLi=document.querySelectorAll('li');
    var oCont=document.querySelector('.cont').querySelectorAll('div');
    var iNow=0;
    history.replaceState('index','','?index=5');
    changeCont("index");
    for (var i = 0; i < oLi.length; i++) {
      oLi[i].onclick=function(){
        var hash=this.dataset.hash;
        history.pushState("ddd",'','?'+hash);//第二个参数是标题很多浏览器没实现便可不写,加上第三个参数便可以改变网址,但是是虚假的网址刷新就没有了,所以得配合后端使用
        changeCont(hash);
      }
    };
    function changeCont(hash){//根据hash改变内容
      for(var i=0;i<oCont.length;i++){
        if(hash==oCont[i].dataset.content){
          oCont[i].style.display="block";
        }else{
          oCont[i].style.display="none";
        }
      }
    }
    window.onpopstate=function(ev){
      console.log(1);

      changeCont(ev.state);
    }

  }
</script>
</body>
</html>

相关文章

  • history 对象详解

    很多人对history对象不是特别了解,今天我总结了下,这个也是面试的重点。基础的history对象的方法:在w3...

  • JavaScriptBOM__History_location(

    目录: 1.History对象 2.location对象 一、History对象 1.什么是History His...

  • history

    History 对象 History 对象包含用户(在浏览器窗口中)访问过的 URL。History 对象是 wi...

  • History in Js

    History 对象 History 对象包含用户(在浏览器窗口中)访问过的 URL。History 对象是 wi...

  • BOM对象(三)———History 对象

    History 对象:History 对象包含用户(在浏览器窗口中)访问过的 URL。History 对象是 wi...

  • History对象

    History对象 History 对象包含用户(在浏览器窗口中)访问过的 URL。 History 对象是 wi...

  • History 对象及事件监听详解

    一、前言 理论上说,每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面,一个 CSS 文...

  • JavaScript基础知识点--BOM之history对象及方

    history 对象 history 对象保存了用户在浏览器中访问页面的历史记录 history 对象方法 bac...

  • history

    window.history属性指向 History 对象,它表示当前窗口的浏览历史。 History 对象保存了...

  • JS History对象

    概述 window.history属性指向History对象,它表示当前窗口的浏览历史。 History对象保存了...

网友评论

      本文标题:history 对象详解

      本文链接:https://www.haomeiwen.com/subject/exbqattx.html