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

最新推荐文章于 2024-06-13 16:50:08 发布

lishengko

最新推荐文章于 2024-06-13 16:50:08 发布

阅读量3.7k

点赞数

分类专栏： HTML5 文章标签： HTML5更新URL HTML5无刷新更新无刷新更新URL

本文链接：https://blog.csdn.net/lishengko/article/details/55669501

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<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>

lishengko

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5网页页面无刷新更新页面URL

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

扫一扫

专栏目录