zoukankan      html  css  js  c++  java

  • html5的onhashchange和history历史管理

    html5的onhashchange和history历史管理

    现在的开发，越来越倾向于页面内跳转，这种情况下需要更新自己的知识，来实现页面内跳转。history就是解决这个问题的。

    HTML5有两种解决办法：

    1，onhashchange
    用到了window.loaction.hash对象（存，取）


    2，history

    (1) pushstate 三个参数：数据，标题（为空），url（可选）。
    (2) popstate是一个事件，读取event.state数据
    注意：url是虚假的。用户不能实际找到。


    本质上：两种方式都是存值+取值事件。简化后就是：
    window.loaction.hash = srcArr;
    window.onhashchange=function(){
        var val = window.loaction.hash;
    }
    和
    history.pushState = srcArr;
    window.onpopstate=function(event){
        var val = event.state;
    };


    详情参考如下参数随机数例子：

    Html代码  收藏代码
      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
      2. <html xmlns="http://www.w3.org/1999/xhtml">  
      3. <head>  
      4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
      5. <title>无标题文档</title>  
      6.   
      7. <script type="text/javascript">  
      8.   
      9. window.onload=function (){  
      10.     var oInput = document.getElementById("input1");  
      11.     oInput.onclick=function(){  
      12.         var oDiv = document.getElementById("div1");  
      13.         var num = generateNum (6);  
      14.   
      15.         //onhashchange  
      16.         window.location.hash = num;  
      17.         window.onhashchange = function(){  
      18.             oDiv.innerHTML = window.location.hash.substring(1);  
      19.         }  
      20.           
      21.   
      22.         //history  
      23.         /*  
      24.         history.pushState(num, '');  
      25.         window.onpopstate = function(event){  
      26.             oDiv.innerHTML=event.state;  
      27.         }*/  
      28.         oDiv.innerHTML=num;  
      29.   
      30.   
      31.         //生成随机数  
      32.         function generateNum (num){  
      33.             var ret = [];  
      34.             for (var i = 0; i < num; i++) {  
      35.                 ret.push(Math.ceil(100*Math.random()));  
      36.             };  
      37.             return ret;  
      38.         }  
      39.     }  
      40. }  
      41.   
      42.   
      43. </script>  
      44. </head>  
      45.   
      46. <body>  
      47.     中奖号码：  
      48. <div id="div1"></div>  
      49.   
      50. <input type="button" value="生成随机号码" id="input1" />  
      51. </body>  
      52. </html> 
  • 相关阅读:
    django form表单验证
    Django messages框架
    pymysql 操作数据库
    python数据类型详解及列表字典集合推导式详解
    深入flask中的request
    修改sqlarchemy源码使其支持jdbc连接mysql
    深入理解Python中协程的应用机制： 使用纯Python来实现一个操作系统吧！！
    svg坐标转换
    近几年总结
    frp中的json模块
  • 原文地址：https://www.cnblogs.com/shsgl/p/4289925.html
Copyright © 2011-2022 走看看