zoukankan      html  css  js  c++  java
  • HTML5无刷新实现跳转页面技术

    window.onpopstate

    window.onpopstate是popstate事件在window对象上的事件句柄.

    每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.

    调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在其他浏览器操作时触发, 比如点击后退按钮(或者在JavaScript中调用history.back()方法).

    当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.

    语法

    01 window.onpopstate = funcRef;

    popstate事件

    假如当前网页地址为http://example.com/example.html,则运行下述代码后:

    01 window.onpopstate = function(event) {
    02   alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
    03 };
    04 //绑定事件处理函数.
    05 history.pushState({page: 1}, "title 1""?page=1");    //添加并激活一个历史记录条目http://example.com/example.html?page=1,条目索引为1
    06 history.pushState({page: 2}, "title 2""?page=2");    //添加并激活一个历史记录条目http://example.com/example.html?page=2,条目索引为2
    07  
    08 history.replaceState({page: 3}, "title 3""?page=3"); //修改当前激活的历史记录条目http://ex..?page=2 变为 http://ex..?page=3,条目索引为2
    09 history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
    10 history.back(); // 弹出 "location: http://example.com/example.html, state: null
    11 history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

    即便进入了那些非pushState和replaceState方法作用过的(比如http://example.com/example.html)没有state对象关联的那些网页, popstate事件也仍然会被触发.

  • 相关阅读:
    phpHttp请求头
    第八周学习总结
    梦断代码阅读笔记-03
    第七周学习总结
    针对自己开发项目的NABC的认知
    梦断代码阅读笔记
    第六周学习总结
    第五周学习总结
    移动端疫情展示
    第四周学习总结
  • 原文地址:https://www.cnblogs.com/libin-1/p/5937656.html
Copyright © 2011-2022 走看看