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

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

var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);

　　History 对象 pushState() 这个方法有3个参数,你可以从上面的例子看到。第一个参数，是一个Json对象 , 在你储存有关当前URl的任意历史信息.第二个参数,title 就相当于传递一个文档的标题，第三个参数是用来传递新的URL. 你将看到浏览器的地址栏发生变化而当前页面并没刷新。

　　让我们看一个例子，在这个例子中我们将在每个独立的URL中存储一些任意数据。

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

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

for(i=0;i<5;i++){var stateObject = {id: i};var title = "Wow Title "+i;var newUrl = "/my/awesome/url/"+i;history.pushState(stateObject,title,newUrl);alert(i);
}window.addEventListener('popstate', function(event) { readState(event.state);
});function readState(data){alert(data.id);
}

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

　　它是非常的简单和有趣，不是吗？

转载于:https://www.cnblogs.com/ranran/p/javascript_url.html

使用JavaScript 修改浏览器 URL 地址栏相关推荐

使用JavaScript修改浏览器URL地址栏的实现代码
现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不 ...
js动态修改浏览器url地址
var stateObject = {}; var title = "Java学习笔记网"; //浏览器上显示的标题 var newUrl = "/personal ...
JS设置浏览器URL，任意定制，安全可靠
背景 Java Web工程登陆后,浏览器地址显示的../login 问题刷新页面就返回到登陆页面解决思路 1.后台设置URL 2.JS设置URL 测试优先,2号方案,原因是方便简单测试源码 1 ...
java 隐藏地址栏参数_要想在浏览器的地址栏上的URL中隐藏传输的参数,需要将form标签的method属性值设置为( )。 (5.0分)_学小易找答案...
[填空题]若在JSP页面的不同作用域中有相同名称的对象,且EL表达式中又省略了相应的作用域类型名,则系统将会按照 . . . 的先后顺序查找相应对象. (20.0分) [简答题]AJAX异步请求过程中 ...
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxxparam2=xxx参数（多用于通过浏览器地址参数保存用户当前操作状态的需求），实现监听url路由切换、状态变化。
app.component.html <button (click)="location.go('api/path','?id=1&pageIndex=2&pageSi ...
google浏览器的地址栏（url）和文本框中英文字母都是全角
2019独角兽企业重金招聘Python工程师标准>>> 问题:google浏览器的地址栏(url)和文本框中英文字母都是全角解决:shift+space 转载于:https://m ...
JavaScript BOM浏览器对象模型
什么是BOM浏览器对象模型? 浏览器对象模型(Browser Object Model(BOM))允许JavaScript与浏览器对话 BOM:浏览器对象模型 //宿主对象 BOM 提供了很多对象,用 ...
php修改浏览器地址,HTML5 history API改变浏览器地址无需hash和刷新加载页面
现在很多网站的前端做的非常炫,点击某个链接瞬间改变浏览器的地址栏的地址,改变的方式不是使用锚点,而是直接改变 URL,页面稍后局部加载完成.如果直接复制页面地址在新的浏览器选项卡中打开则是全部加载整个 ...
使用 JavaScript 获取当前 URL？
问: 我想要的只是获取网站 URL.不是从链接中获取的 URL.在页面加载时,我需要能够获取网站的完整当前 URL,并将其设置为变量以随意使用. 答1: huntsbot.com聚合了超过10+全球外 ...

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

使用JavaScript 修改浏览器 URL 地址栏相关推荐

最新文章

热门文章