zoukankan      html  css  js  c++  java
  • (一)HTML5

    可以解决什么问题:

    可以实现网页的ajax加载,同时又能完成URL的改变而没有网页跳转刷新的迹象,就像是改变了网页的hash(#)一样。

    优于hash:

    避免了改变hash的问题,避免了用户不理解URL的形式感到疑惑,同时还有onpopstate提供监听,良好响应后退前进。而且它不需要这个URL真实存在。

    HTML5 的 pushState+Ajax

    pushState() 的基本参数是:

    1 var state = ( {
    2 url: ~href, title: ~title, ~additionalKEY: ~additionalVALUE
    3 } );
    4 window.history.pushState(state, ~title, ~href);
    5 window.history.replaceState( state, ~title, ~href);    // 替换

    pushState、replaceState 的区别

    pushState()可以创建历史,可以配合popstate事件,而replaceState()则是替换掉当前的URL,不会产生历史。

    注:

    只能用同域的URL替换,例如你不能用http://baidu.com去替换http://google.com。

    state对象不存储不可序列化的对象如DOM。

    pushState 配合 popstate 监听

    1 window.addEventListener('popstate', function(evt){
    2     var state = evt.state;
    3     var tilte = state.tilte ;
    4     var url = state.url
    5     document.title=title;
    6     doSomething(url);  // 自定义函数
    7 }, false);

    popstate与hashChange

    对于http://www.abc.com/path?search=ghj#hashstring 这个url来说,

    ① http://为协议
    ② www.abc.com为host
    ③ path为path,也就是我们的子目录,每个子目录可以干很多事情
    ④ #hashstring为hash相关

    ①-③页面会刷新,④页面不刷新,

    pushState与改变hash 相同点:可以改变url地址

    pushState与改变hash 不同点:hashChange只能改变hashstring 部分,pushState可改变①-③而不刷新页面

    popstate 为1-3环节的变化引起的回调
    hashChange 为hash变化引起的回调,是不同的

    实例应用 - 劫持后退按钮

    (function(window, location) {
    history.replaceState(null, document.title, location.pathname+"#!/stealingyourhistory");
    history.pushState(null, document.title, location.pathname);
    window.addEventListener("popstate", function() {
    if(location.hash === "#!/stealingyourhistory") {
    history.replaceState(null, document.title, location.pathname);
    setTimeout(function(){
    location.replace("http://www.baidu.com/");
    },0); } }, false);  }(window, location));
  • 相关阅读:
    TP5学习笔记- 使用命令行创建控制器
    centos 7 下安装mysql5.7
    webserver的安装
    linux常用命令 服务器硬件资源信息
    SSH 安装/ config 配置以及免密码登录
    thinkphp ,laravel,yii2运行环境搭建.
    分享几个博客园代码样式的CSS配置(复制黏贴即可)
    vue中通过.sync修饰符实现子组件修改父组件数据
    vue中$attrs和$listeners以及inheritAttrs的用法
    Vue项目中实现用户登录及token验证
  • 原文地址:https://www.cnblogs.com/huair_12/p/4173677.html
Copyright © 2011-2022 走看看