文档章节

HTML5 history API改变浏览器地址无需hash和刷新加载页面

hosser
 hosser
发布于 2016/03/29 11:12
字数 974
阅读 185
收藏 2

HTML5 history API改变浏览器地址无需hash和刷新加载页面技术

maybe yes 发表于2015-04-26 21:48

原文链接 : http://blog.lmlphp.com/archives/110/modify_browser_url_without_hash_or_reloading_refreshing_page  来自 : LMLPHP后院

现在很多网站的前端做的非常炫,点击某个链接瞬间改变浏览器的地址栏的地址,改变的方式不是使用锚点,而是直接改变 URL,页面稍后局部加载完成。如果直接复制页面地址在新的浏览器选项卡中打开则是全部加载整个页面。这样的前端技术体验,一开始让我和很多的前端工程师觉得现有的知识不可能做到。后来才了解到,在一般的比较老的浏览器中是不可能实现的,需要在 Chrome, Safari, FF4+, and IE10pp4+ 才能做到!。

最开始发现这样的效果是在 GITHUB 中,后来看到很多同行的技术博客也有使用了这样类似的技术的。我问过一个做前端的同事,问他的网站的这样的技术是怎么实现的,他告诉我说是使用锚点;我说,锚点是有“#”号的,但是我并没有看到“#”号啊;他说,那个“#”号是可以隐藏的。之前也了解过这样的技术,大概知道是 HTML5 history 相关的 API 可以实现,当他告诉我使用隐藏锚点时,我顿时感觉很奇怪,于是才写了这篇文章。

最简单的实现,代码如下:

<script>
window.history.pushState("object", "ignored param title", "/this_is_new_url");
</script>


本文下面做了两个临时改变页面地址体验的按钮,下面的 button 控制了点击次数,防止创建了太多的 history 栈,下面的按钮点击了改变再恢复后,您会发现您的浏览器出现了可以前进的按钮。

有关 pushState 方法,developer.mozilla.org 有详细的描述,第一个参数是一个 JavaScript 对象关联到新创建的历史实体,第二个参数暂时没有什么用处,第三个参数是新的 URL。原文如下:

The pushState() method

pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL. Let's examine each of these three parameters in more detail:

    state object — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.

    The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to pushState(), the method will throw an exception. If you need more space than this, you're encouraged to use sessionStorage and/or localStorage.

    title — Firefox currently ignores this parameter, although it may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving.

    URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts the browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.

另一个重要的 HTML5 API,onpopstate 方法。该方法在浏览器前进后退时被触发。用来侦测 pushState 或 history.back(),可以在此处做一些局部刷新或修改标题的操作。如下代码示例:

<script>
// You can then use window.onpopstate to detect the back/forward button navigation:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};
</script>


阅(284)评(0)查看评论


本文转载自:http://blog.lmlphp.com/archives/110/modify_browser_url_without_hash_or_reloading_refreshing_page

hosser

hosser

粉丝 192
博文 78
码字总数 4614
作品 3
徐汇
私信 提问
Vue-router中hash与history的区别

Vue为了构建 SPA, 需要引入前端路由系统Vue-Router。前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。 为了达到这一目的,利用浏览器的特性, Vue-Router提供了以下两种路由模...

老菜鸟0217
01/08
91
0
「面试必考」单页路由解析与实现

前言 现代前端项目多为单页Web应用(SPA),在单页Web应用中路由是其中的重要环节。 每个现代前端框架都有与之对应的路由实现,例如 vue-router、react-router 等。 本文并不涉及 vue-router、...

云中桥
07/16
0
0
vue番外篇 -- vue-router浅析原理

近期被问到一个问题,在你们项目中使用的是Vue的SPA(单页面)还是Vue的多页面设计? 这篇文章主要围绕Vue的SPA单页面设计展开。 关于如何展开Vue多页面设计请点击查看。 vue-router是什么?...

DIVI
2018/10/19
0
0
history API 和锚点链接在单页应用页面切换中的应用

Ajax的流行和前端MVVM框架的快速发展给Web开发带来了极大的便利,也让Web应用体验越来越好,近些年单页应用也随之流行起来。Ajax的应用可以让网页实现无刷新更新数据,但其也会造成浏览器无法...

深海鱼在掘金
2018/10/30
0
0
browserHistory hashHistory 的区别?

一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。 常用的 history 有三种形式 browserH...

945996501
2018/06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot Actuator监控使用详解

在企业级应用中,学习了如何进行SpringBoot应用的功能开发,以及如何写单元测试、集成测试等还是不够的。在实际的软件开发中还需要:应用程序的监控和管理。SpringBoot的Actuator模块实现了应...

程序新视界
17分钟前
4
0
JDBC+C3P0+DBCP 基本使用

1.概述 这篇文章主要说了JDBC的基本使用,包括Statement,PreparedStatement,JDBC的连接,Mysql创建用户创建数据表,C3P0的连接与配置,DBCP的连接与配置. 2.mysql的处理 这里的JDBC使用Mysql作为...

Blueeeeeee
今天
7
0
MVC Linux下开发及部署

linux使用的是 Ubuntu 64 位 18.04.2 LTS 首先复制C:\Program Files (x86)\Embarcadero\Studio\20.0\PAServer 下 LinuxPAServer20.0.tar.gz 到 linux 目录下 运行链接编译程序 delphi环境配置......

苏兴迎
今天
11
0
3.控件及其属性

1.文本 2.按钮

横着走的螃蟹
今天
9
0
安装Genymotion模拟器慢的解决方案

第一步点击下载, C:\Users\Administrator\AppData\Local\Genymobile\genymotion.log 中搜索 ova 会发现这个文件 使用迅雷下载即可. 在 虚拟机中导入这个.ova 文件 即可安装...

chenhongjiang
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部