`
shinepaopao
  • 浏览: 145025 次
社区版块
存档分类
最新评论

使用 JavaScript 修改浏览器 URL 地址栏

阅读更多

现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不复杂,是可以实现的,我们来编写些代码。来看看它是如何工作的。


1 var stateObject = {};
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中存储一些任意数据。

 

1 for(i=0;i<5;i++){
2   var stateObject = {id: i};
3   var title = "Wow Title "+i;
4   var newUrl = "/my/awesome/url/"+i;
5   history.pushState(stateObject,title,newUrl);
6 }

 

  现在运行,点击浏览器的返回按钮,查看URL是怎么改变的。对于每次URL的改变,是因为它存储了历史状态“id”以及对应的值。但是我们怎么重新获得历史状态,并且在此基础上做些事情呢?我们需要对“popstate”添加事件监 听 器,这将会在每次历史对象的状态改变的时候触发。

 

01 for(i=0;i<5;i++){
02   var stateObject = {id: i};
03   var title = "Wow Title "+i;
04   var newUrl = "/my/awesome/url/"+i;
05   history.pushState(stateObject,title,newUrl);
06   alert(i);
07 }
08   
09 window.addEventListener('popstate'function(event) {
10   readState(event.state);
11 });
12   
13 function readState(data){
14   alert(data.id);
15 }

 

  现在你会看到无论什么时候你点击返回按钮,一个“popstate”事件就会被触发。我们的事件侦听器然后检索历史状态对象与之关联的URL,并提示“id”的值。

 

  它是非常的简单和有趣,不是吗?

6
2
分享到:
评论
1 楼 xyf_84 2013-10-23  
兼容性没说,也没测试

相关推荐

    使用JavaScript修改浏览器URL地址栏的实现代码

    JavaScript提供了一种方式,通过`History`对象的`pushState()`方法来修改浏览器的URL地址栏,而无需刷新页面。这一功能在构建单页应用程序(SPA)时特别有用,因为它可以提供更好的用户体验,同时更新浏览器的历史...

    获取浏览器地址栏URL

    在IT行业中,获取浏览器地址栏URL是一项常见的任务,特别是在开发浏览器扩展、自动化测试或数据分析等场景下。本文将深入探讨如何通过枚举和COM组件来实现这一目标,并介绍如何向浏览器添加插件来获取地址栏的URL。 ...

    js制作浏览器的地址栏

    在这个主题中,我们将探讨如何使用JavaScript来创建一个类似于浏览器地址栏的功能,让用户可以输入网址并实现页面跳转。首先,我们需要理解HTML的基本结构,以及JavaScript与HTML之间的交互。 HTML(HyperText ...

    NPAPI 插件获取浏览器地址栏URL

    扩展可以通过API与浏览器交互,获取地址栏URL则使用`chrome.tabs.query`或`chrome.tabs.getCurrent`方法。 6. **替代方案**:为了实现类似的功能,开发者可以转向使用WebExtensions API,这是一个跨浏览器的API标准...

    当你在浏览器地址栏输入一个URL后回车,将会发生的事情?

    当你在浏览器地址栏输入一个URL并按下回车键时,一系列复杂的网络交互过程随即展开,这个过程涉及到多个关键技术和组件,对于软件开发者来说,理解这一流程至关重要。以下将详细阐述这个过程中涉及的主要知识点: ...

    利用JS把URL地址栏%20、%55之类编码转成中文字符

    本文将深入探讨如何使用JavaScript(简称JS)来解码这些URL编码,使其转换回原本的中文或其他非英文字符。 ### URL编码与解码原理 URL编码的主要目的是确保URL中的所有字符都能在网络上传输,避免因特殊字符导致的...

    JavaScript正则获取地址栏中参数的方法

    JavaScript正则获取地址栏中参数的方法主要阐述了如何通过正则表达式在JavaScript中获取URL地址栏参数值的技巧。这一方法在Web开发中十分实用,尤其是在处理动态地址时,我们经常需要获取某些特定的查询参数值。通过...

    取IE浏览器地址栏内容.rar

    标题“取IE浏览器地址栏内容.rar”提示我们这个压缩包包含的是关于获取Internet Explorer(简称IE)浏览器地址栏内容的相关资料。在IT领域,获取浏览器地址栏内容通常是编程任务的一部分,目的是为了实现某些功能,...

    javascript接收地址栏传值

    在Web开发中,通过URL地址栏传递参数是一种常见的场景,比如实现页面跳转时携带数据、查询字符串处理等。JavaScript能够灵活地处理这些参数,使得开发者能够在客户端进行数据获取与处理。本文将详细介绍如何使用...

    android WebView加载H5去地址栏的两种方式

    然后,我们可以在H5页面加载完成后,注入一段JavaScript代码,隐藏浏览器的地址栏和工具栏: ```java webView.loadUrl("javascript:(function(){" + "document.getElementById('toolbar').style.display='none';" ...

    浏览器地址栏欺骗漏洞挖掘.pdf

    这种欺骗技术主要利用了浏览器的各种特性,包括URL跳转、地址栏焦点、浏览器的UI控件以及国际化域名的漏洞。 1. **地址栏欺骗的常见类型** - **URL跳转**:攻击者通过各种方式让浏览器在跳转到另一个页面的同时...

    js实现ifram取父窗口URL地址的方法

    本文介绍的JavaScript方法,就是如何在iframe中实现获取父窗口URL地址的过程。这一过程利用了JavaScript中的window.parent对象,它是iframe元素与父窗口之间的桥梁。 首先,理解window对象在JavaScript中的地位非常...

    10JavaScript浏览器对象模型BOM.docx

    3. **Location对象**:Location对象反映了浏览器地址栏中的URL信息。我们可以使用`location.href`获取完整的URL,`location.pathname`获取路径名,以及`location.assign()`来加载新的页面。此外,`location.replace...

    java浏览器+swing嵌套网页+源码免费

    6. **界面优化**:可能包括添加前进、后退按钮,刷新功能,以及地址栏等常见浏览器元素,提升用户体验。 这个项目的源码是一个很好的学习资源,可以帮助开发者了解如何在Java Swing应用中集成Web浏览功能。通过研究...

    js获取地址栏参数

    本文将详细介绍如何使用JavaScript来获取上一个页面传过来的URL地址栏参数,并对给出的代码进行解析与优化。 #### 二、基础知识 在深入讨论之前,我们先来了解一下URL的基本结构以及JavaScript中与之相关的几个...

    js获取中文地址栏参数

    此标题明确指出本文的主题是通过JavaScript来获取URL地址栏中的中文参数。这里所说的“地址栏”指的是浏览器地址栏中输入的URL地址,而“参数”则是指URL中用于传递数据的部分。 #### 描述:“js获取中文地址栏参数...

    js实现页面与页面之间传值,js利用地址栏URL传值,利用H5 Web 存储 传值,利用JavaScript Cookie存储 传值

    在浏览器的地址栏中,我们可以看到URL后面经常会有问号“?”,后面跟着的就是查询字符串。在JavaScript中,可以使用`window.location.search`获取到这个查询字符串。要向URL添加参数,可以使用`window.location....

    JS获取地址栏url所有信息的方法

    1. 获取整个 URL 字符串:使用 `window.location.href` 可以获取整个 URL 字符串,在浏览器中就是完整的地址栏。 例子:`http://www.120fd.com/xgl/?utm_medium=bb&utm_source=aa#a1` 2. 获取 URL 的协议部分:...

Global site tag (gtag.js) - Google Analytics