JS对浏览器地址的操作

最新推荐文章于 2025-06-17 09:51:47 发布

诺贝尔爱情奖

最新推荐文章于 2025-06-17 09:51:47 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 浏览器浏览器地址

本文链接：https://blog.youkuaiyun.com/A_Runner/article/details/77837077

javascript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何利用JavaScript中的Location对象及其方法（如assign(), replace() 和 reload()）来实现浏览器地址的更改与页面的刷新。同时展示了通过修改Location对象的不同属性来间接达到更新URL的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

“两情若是久长时,又岂在朝朝暮暮”
使用 location 对象可以通过很多方式来改变浏览器的位置。首先，也是最常用的方式，就是使用assign() 方法并为其传递一个 URL，如下所示。

location.assign("http://www.wrox.com");

这样，就可以立即打开新 URL 并在浏览器的历史记录中生成一条记录。如果是将 location.href或 window.location 设置为一个 URL 值，也会以该值调用 assign() 方法。例如，下列两行代码与显式调用 assign() 方法的效果完全一样。

window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

在这些改变浏览器位置的方法中，最常用的是设置 location.href 属性。
另外，修改 location 对象的其他属性也可以改变当前加载的页面。下面的例子展示了通过将 hash 、search 、 hostname 、 pathname 和 port 属性设置为新值来改变 URL。

//假设初始 URL 为 http://www.wrox.com/WileyCDA/
//将 URL 修改为"http://www.wrox.com/WileyCDA/#section1"
location.hash = "#section1";
//将 URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript"
location.search = "?q=javascript";
//将 URL 修改为"http://www.yahoo.com/WileyCDA/"
location.hostname = "www.yahoo.com";
//将 URL 修改为"http://www.yahoo.com/mydir/"
location.pathname = "mydir";
//将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/"
location.port = 8080;

每次修改 location 的属性（ hash 除外），页面都会以新 URL 重新加载。当通过上述任何一种方式修改 URL 之后，浏览器的历史记录中就会生成一条新记录，因此用户通过单击“后退”按钮都会导航到前一个页面。要禁用这种行为，可以使用 replace() 方法。这个方法只接受一个参数，即要导航到的 URL；结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录。在调用 replace() 方法之后，用户不能回到前一个页面，来看下面的例子：

<!DOCTYPE html>
<html>
<head>
<title>You won't be able to get back here</title>
</head>
<body>
<p>Enjoy this page for a second, because you won't be coming back here.</p>
<script type="text/javascript">
setTimeout(function () {
location.replace("http://www.wrox.com/");
}, 1000);
</script>
</body>
</html>

如果将这个页面加载到浏览器中，浏览器就会在 1 秒钟后重新定向到 www.wrox.com。然后，“后退”按钮将处于禁用状态，如果不重新输入完整的 URL，则无法返回示例页面。
与位置有关的最后一个方法是 reload() ，作用是重新加载当前显示的页面。如果调用 reload()时不传递任何参数，页面就会以最有效的方式重新加载。也就是说，如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载，则需要像下面这样为该方法
传递参数 true 。

location.reload(); //重新加载（有可能从缓存中加载）
location.reload(true); //重新加载（从服务器重新加载）

位于 reload() 调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素。
为此，最好将 reload() 放在代码的最后一行。