HTML5网页页面无刷新更新页面URL

HTML5可通过history.pushState修改网页的URL地址,在配合相关代码显示隐藏相应界面便可以实现单页面多界面相互操作。该方法比直接访问URL地址速度快,执行效率高,UI体验好,但会增加页面的复杂性及耦合性,要视实际情况而定,一般都用在dialog弹出框上。
实例:
HTML5网页页面无刷新更新页面URL_第1张图片


<html>
<head>
    <title>HTML5刷新title>
    <meta name="full-screen" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
head>
<body style="margin: 0;padding: 0;">
    <button>弹出框button>
    <div class="dialog" style="width: 100%;height: 100%;position: absolute;background-color: red;display: none;top:0;">新页面div>
body>
<script src="http://www.zeptojs.cn/zepto.min.js">script>
<script type="text/javascript">

$(function(){
    $("button").click(function(){
        //html5 无刷新修改URL pushState 重复地址会添加到历史页面 replaceState 重复地址不会添加到历史页面
        history.pushState("","",window.location.href+"#dialog");
        $(".dialog").show();
    })

    //刷新监听
    window.onload = function(){
        if(window.location.href.indexOf("dialog") != -1)
            history.go(-1);
    }

    //浏览器回退监听
    window.onpopstate = function () {
        if($(".dialog").css("display")!="none")
            $(".dialog").hide();
    }
})
script>
html>

你可能感兴趣的:(HTML5)