现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不复杂,是可以实现的,我们来编写些代码。来看看它是如何工作的。
2 |
var title = "Wow Title" ;
|
3 |
var newUrl = "/my/awesome/url" ;
|
4 |
history.pushState(stateObject,title,newUrl); |
History 对象 pushState() 这个方法有3个参数,你可以从上面的例子看到。第一个参数,是一个Json对象 , 在你储存有关当前URl的任意历史信息.第二个参数,title 就相当于传递一个文档的标题 ,第三个参数是用来传递新的URL. 你将看到浏览器的地址栏发生变化而当前页面并没刷新。
让我们看一个例子,在这个例子中我们将在每个独立的URL中存储一些任意数据。
2 |
var stateObject = {id: i};
|
3 |
var title = "Wow Title " +i;
|
4 |
var newUrl = "/my/awesome/url/" +i;
|
5 |
history.pushState(stateObject,title,newUrl);
|
现在运行,点击浏览器的返回按钮,查看URL是怎么改变的。对于每次URL的改变,是因为它存储了历史状态“id”以及对应的值。但是我们怎么重新获得历史状态,并且在此基础上做些事情呢?我们需要对“popstate”添加事件监 听 器,这将会在每次历史对象的状态改变的时候触发。
02 |
var stateObject = {id: i};
|
03 |
var title = "Wow Title " +i;
|
04 |
var newUrl = "/my/awesome/url/" +i;
|
05 |
history.pushState(stateObject,title,newUrl);
|
09 |
window.addEventListener( 'popstate' , function (event) {
|
10 |
readState(event.state);
|
13 |
function readState(data){
|
现在你会看到无论什么时候你点击返回按钮,一个“popstate”事件就会被触发。我们的事件侦听器然后检索历史状态对象与之关联的URL,并提示“id”的值。
它是非常的简单和有趣,不是吗?
分享到:
相关推荐
JavaScript提供了一种方式,通过`History`对象的`pushState()`方法来修改浏览器的URL地址栏,而无需刷新页面。这一功能在构建单页应用程序(SPA)时特别有用,因为它可以提供更好的用户体验,同时更新浏览器的历史...
在IT行业中,获取浏览器地址栏URL是一项常见的任务,特别是在开发浏览器扩展、自动化测试或数据分析等场景下。本文将深入探讨如何通过枚举和COM组件来实现这一目标,并介绍如何向浏览器添加插件来获取地址栏的URL。 ...
在这个主题中,我们将探讨如何使用JavaScript来创建一个类似于浏览器地址栏的功能,让用户可以输入网址并实现页面跳转。首先,我们需要理解HTML的基本结构,以及JavaScript与HTML之间的交互。 HTML(HyperText ...
扩展可以通过API与浏览器交互,获取地址栏URL则使用`chrome.tabs.query`或`chrome.tabs.getCurrent`方法。 6. **替代方案**:为了实现类似的功能,开发者可以转向使用WebExtensions API,这是一个跨浏览器的API标准...
当你在浏览器地址栏输入一个URL并按下回车键时,一系列复杂的网络交互过程随即展开,这个过程涉及到多个关键技术和组件,对于软件开发者来说,理解这一流程至关重要。以下将详细阐述这个过程中涉及的主要知识点: ...
本文将深入探讨如何使用JavaScript(简称JS)来解码这些URL编码,使其转换回原本的中文或其他非英文字符。 ### URL编码与解码原理 URL编码的主要目的是确保URL中的所有字符都能在网络上传输,避免因特殊字符导致的...
JavaScript正则获取地址栏中参数的方法主要阐述了如何通过正则表达式在JavaScript中获取URL地址栏参数值的技巧。这一方法在Web开发中十分实用,尤其是在处理动态地址时,我们经常需要获取某些特定的查询参数值。通过...
标题“取IE浏览器地址栏内容.rar”提示我们这个压缩包包含的是关于获取Internet Explorer(简称IE)浏览器地址栏内容的相关资料。在IT领域,获取浏览器地址栏内容通常是编程任务的一部分,目的是为了实现某些功能,...
在Web开发中,通过URL地址栏传递参数是一种常见的场景,比如实现页面跳转时携带数据、查询字符串处理等。JavaScript能够灵活地处理这些参数,使得开发者能够在客户端进行数据获取与处理。本文将详细介绍如何使用...
然后,我们可以在H5页面加载完成后,注入一段JavaScript代码,隐藏浏览器的地址栏和工具栏: ```java webView.loadUrl("javascript:(function(){" + "document.getElementById('toolbar').style.display='none';" ...
这种欺骗技术主要利用了浏览器的各种特性,包括URL跳转、地址栏焦点、浏览器的UI控件以及国际化域名的漏洞。 1. **地址栏欺骗的常见类型** - **URL跳转**:攻击者通过各种方式让浏览器在跳转到另一个页面的同时...
本文介绍的JavaScript方法,就是如何在iframe中实现获取父窗口URL地址的过程。这一过程利用了JavaScript中的window.parent对象,它是iframe元素与父窗口之间的桥梁。 首先,理解window对象在JavaScript中的地位非常...
3. **Location对象**:Location对象反映了浏览器地址栏中的URL信息。我们可以使用`location.href`获取完整的URL,`location.pathname`获取路径名,以及`location.assign()`来加载新的页面。此外,`location.replace...
6. **界面优化**:可能包括添加前进、后退按钮,刷新功能,以及地址栏等常见浏览器元素,提升用户体验。 这个项目的源码是一个很好的学习资源,可以帮助开发者了解如何在Java Swing应用中集成Web浏览功能。通过研究...
本文将详细介绍如何使用JavaScript来获取上一个页面传过来的URL地址栏参数,并对给出的代码进行解析与优化。 #### 二、基础知识 在深入讨论之前,我们先来了解一下URL的基本结构以及JavaScript中与之相关的几个...
此标题明确指出本文的主题是通过JavaScript来获取URL地址栏中的中文参数。这里所说的“地址栏”指的是浏览器地址栏中输入的URL地址,而“参数”则是指URL中用于传递数据的部分。 #### 描述:“js获取中文地址栏参数...
在浏览器的地址栏中,我们可以看到URL后面经常会有问号“?”,后面跟着的就是查询字符串。在JavaScript中,可以使用`window.location.search`获取到这个查询字符串。要向URL添加参数,可以使用`window.location....
1. 获取整个 URL 字符串:使用 `window.location.href` 可以获取整个 URL 字符串,在浏览器中就是完整的地址栏。 例子:`http://www.120fd.com/xgl/?utm_medium=bb&utm_source=aa#a1` 2. 获取 URL 的协议部分:...