JavaScript-JS加载完页面再刷 的实现原理

Web程序数据库 Web程序数据库 主题:1214 回复:2505

JavaScript-JS加载完页面再刷 的实现原理

灵芸 发布于 2017-10-09 字数 184 浏览 1005 回复 2

URL改变了,页面却不会刷新,会等JS加载完了再刷新 的实现原理是什么啊

facebook的URL很奇怪
他的URL改变了,页面却不会刷新,会等JS加载完了再刷新
有人知道怎么实现的吗

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(2

偏爱自由 2017-10-27 2 楼

主要使用了location.hash方式,通过绑定window的hashchange事件来监控页面内跳转事件,这种方式大多用在单页面应用中,对用户的体验比较好,不会像传统页面同步请求中会存在页面白屏的等待。

甜柠檬 2017-10-27 1 楼

fb和google只是修改了url,为了方便你复制分享,实际并没有载入新页面而是用ajax来实现页面局部更新

可以用

window.location.hash

或者 history.pushState function

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
history.pushState(stateObj, "page 2", "bar.html");
}
var link = node.getElementByID('click');
link.addEventListener('click', change_my_url, false);
</script>

and a href:

 <a href="#" id='click'>Click to change url to bar.html</a>

改变浏览器URL但不载入新页面