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

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>

HTML5网页页面无刷新更新页面URL相关推荐

html网页无刷新数据更新,使用javascript怎么实现页面无刷新更新数据
使用javascript怎么实现页面无刷新更新数据发布时间:2021-03-18 17:22:21 来源:亿速云阅读:71 作者:Leah 这篇文章给大家介绍使用javascript怎么实现页面无 ...
html 无刷新显示公告,用javascript实现页面无刷新更新数据_js
程序设计中会经常碰到一种情况,就是事先无法得知用户会需要哪些数据,必须根据用户选择后再从服务器重新提取数据后反馈给用户.比如一简单的情况,用户选择省份以后,我们立即会在市里边将这个省的所有市重新显示出 ...
html网页无刷新数据更新,用javascript实现页面无刷新更新数据
以下正文: 程序设计中会经常碰到一种情况,就是事先无法得知用户会需要哪些数据,必须根据用户选择后再从服务器重新提取数据后反馈给用户.比如一简单的情况,用户选择省份以后,我们立即会在市里边将这个省的 ...
使用ajax和history.pushState无刷新改变页面URL
HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别传统的ajax有如下的 ...
ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别传统的ajax有如 ...
使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...
html5 pjax,pjax——页面无刷新跳转
pjax虽然不是什么新的技术,然而本人是最近才发现这个比较牛叉的技术.下面是对pjax的介绍: pjax是在HTML5里面引用的新技术,是对ajax + pushState的封装,是实现无刷新ajax ...
php无刷新实现页面更新,使用laravel和ajax实现整个页面无刷新的操作方法
1.数据库文件 CREATE TABLE IF NOT EXISTS mr_key ( id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT ' ...
ajax 页面无刷新,Ajax的页面无刷新实现详解（附代码）
这次给大家带来Ajax的页面无刷新实现详解(附代码),Ajax页面无刷新实现的注意事项有哪些,下面就是实战案例,一起来看一下. ajax (ajax开发) AJAX即"Asynchronou ...

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

HTML5网页页面无刷新更新页面URL相关推荐

最新文章

热门文章