现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器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修改浏览器URL地址栏,需要的朋友可以参考下
本篇文章主要是对javascript/jquery获取地址栏url参数的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
Window 对象 ...open方法用于打开一个新的浏览器窗口,并在新窗口中装入一个指定的URL地址; open方法在打开一个新的浏览器窗口时,还可以指定窗口的名称(第二个参数); open方法在打开一个新的浏览
6.2.2 地址栏伪造 142 6.2.3 界面伪装 143 6.3 结合系统特性进行攻击 144 6.3.1 Android一例漏洞:使用Intent URL Scheme绕过Chrome SOP 144 6.3.2 iOS的一例漏洞:自动拨号泄露隐私 146 6.3.3 Windows Phone...
[removed]后面可以接任何合法的javascript表达式或者使用分号分隔的表达式集合,这些结果会以字符串的形式返回到浏览器窗口。 例如,在浏览器的地址栏输入[removed] 5 + 4, 回车后浏览器的窗口就会显示9
傲游3功能丰富,拥有在线收藏、鼠标手势、广告过滤、智能地址栏、多重搜索、页面截图、即时翻译等数十种实用功能,并且独有"快应用"、"团购指数"等创新性功能,充分让用户体验到基于新式浏览器的一站式互联网服务的...
a extension covert url to qrcode for Chrome; 将Chrome地址栏网址转成二维码
1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...
暴食者-c! 帮助c尽可能多地吃食物,同时避开敌人! 在浏览器的地址栏中播放。 不幸的是,浏览器支持是有限的。 在 macOS 或 Linux 上的 Firefox 上效果最佳。
Web浏览器的URL栏用于编写网站地址和搜索查询。 查找是一种工具,可为用户提供自定义这些功能的可能性。 为此,它使用和一小段Javascript。 它旨在成为一种简单的方法来增强URL栏的用户体验,易于使用和安装。 而且...
008-设置浏览器地址栏上的URL 001-DOM编程-获取文本框的value 002-DOM编程-innerHTML和innerText操作div和span 003-DOM编程-关于正则表达式 004-去除字符串的前后空白trim 005-表单验证 006-复选框的全选和取消全选 ...
1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...
这是由他的浏览器的地址栏完成的. 命令的语法看上去像这样: Copy code javascrit:alert(#command#) 比方说如果你想看到在网站http://www.example.com里面的一个警告框,那么首先在地址栏输入URL(www.example
一、前言 1 二、JavaScript的程序控制结构和对象 2 1、for循环语句: 2 ...4、直接在javascript中使用java语句:经试验失败,提示“java未定义”。 25 5、从java访问javascript资源和方法:略 25 十、插入件 25
open方法用于打开一个新的浏览器窗口,并在新窗口中装入一个指定的URL地址 ; open方法在打开一个新的浏览器窗口时,还可以指定窗口的名称(第二个参数); open方法在打开一个新的浏览器窗口时,还可以指定窗口...
#COPY URL - Chrome 扩展程序 COPY URL是 Google Chrome 浏览器的扩展程序,可作为附加工具栏装入浏览器。 这是一个方便的插件来复制... 更改扩展图标并移至地址栏 ####更新1.1: 改变了复制URL地址的方式(一键复制)
实例018 下降式浏览器 32 实例019 旋转的窗口 33 实例020 移动的窗口 34 实例021 震动的窗口 35 实例022 弹出广告窗口 36 1.4 窗口控制 37 实例023 窗口始终在最上面 38 实例024 窗口的最小化、最大化 39 实例025 ...
omni_rt Chrome扩展程序可从地址栏中执行实时搜索 我认为这几乎是转换Chrome浏览器地址栏中输入的字符串(作为URL的一部分)的最小代码。
发生JavaScript错误时,更改工具栏中的扩展程序图标颜色 在页面右下角显示错误图标 通过单击工具栏或通知图标显示错误详细信息 弹出窗口中的错误源URL是可单击的 在通知弹出窗口中显示错误详细信息 显示错误堆栈跟踪...