你真的完全了解window.location.href吗？

最新推荐文章于 2025-05-31 09:35:27 发布

0522Skylar

最新推荐文章于 2025-05-31 09:35:27 发布

阅读量5.5k

点赞数 20

CC 4.0 BY-SA版权

分类专栏：分享前端文章标签：前端

本文链接：https://blog.csdn.net/qq_44859233/article/details/136257737

前端同时被 2 个专栏收录

47 篇文章

订阅专栏

28 篇文章

订阅专栏

window.location.href赋值

开篇来一个问题？请问给window.location.href赋值，真的会跳转到对应的网址吗？

请问在https://developer.mozilla.org/zh-CN/docs/Web 网页内，执行window.location.href = 'baidu.com’会出现什么效果？

有多少人觉得会跳转到https://baidu.com页面？

答案是只会跳转到：

https://developer.mozilla.org/zh-CN/docs/baidu.com

注意：这里跳转的字符串只是一个字符串，不是特别的字符串，特别是指，带有https://的字符串

如果跳转的是普通字符串，那就是相对路径下跳转，所以就只会将web字符变成了baidu.com字符。

MDN文档中对Location.href的解释：

Location 接口的 href 属性是一个字符串化转换器 (stringifier), 返回一个包含了完整 URL 的 USVString 值，且允许 href 的更新。

所以location.href会跳转页面地址。

修改location.href属性没有变化

https://juejin.cn/

在控制台执行window.location.href = ‘baidu.com’，但是页面刷新了，但还是在https//juejin.cn

掘金的官网地址，就有这样的效果，这是怎么实现的？

使用Object.defineProperty()方法重新定义浏览器内置对象window.location的属性，但该属性已经是不可配置（non-configurable）的。在JavaScript中，对于不可配置的属性，不能改变其特性（包括是否可写、是否有 getter/setter 等），也不能删除。

由于window.location是浏览器核心对象的一个重要属性，因此它默认是不可重新定义或修改的。这意味着你无法通过Object.defineProperty()来覆盖或监控其行为。

// 这是一个简单的示例，它会记录对location.href的修改尝试，但并不能阻止修改
var originalLocation = window.location;
Object.defineProperty(window, 'location', {
  get: function() {
    return originalLocation;
  },
  set: function(newUrl) {
    console.warn('尝试修改window.location.href:', newUrl);
    // 可以在这里添加自己的逻辑，比如上报日志等
    // ...
    // 最后仍然允许实际的跳转发生
    originalLocation.href = newUrl;
  },
  configurable: true // 必须保持configurable为true，否则无法重新定义setter
});

// 当然，这种方式可以被控制台中的 Object.getOwnPropertyDescriptor 和 Object.defineProperty 轻易绕过

如果你需要监控页面跳转的情况，可以考虑监听其他相关事件，例如：

// 监听 'beforeunload' 事件以检测页面即将离开的情况
window.addEventListener('beforeunload', function (event) {
    // 可在此处添加处理逻辑，比如弹出确认框或者记录日志等
    console.log('尝试离开当前页面');
    window.alert(111)
    // 如果要阻止默认行为（即页面跳转），可以返回一个字符串
    // return '确定要离开此页面吗？';
});

// 或者监听 'hashchange' 事件来检测 URL 的 hash 部分的变化
window.addEventListener('hashchange', function (event) {
    console.log('URL的hash部分发生了变化');
  	window.alert(111)
});

但是直接在控制台输入，这两个事件都没触发，会直接执行

以上的示例，都不能完全阻止控制台对window.location.href的直接修改，只是提供了间接监控页面状态变化的方法。

所以掘金是怎么实现这样的效果的呢？

其实输入window.location.href = ‘baidu.com’，页面是刷新了，根据上面的内容，我们知道，本来是要跳转到https://juejin.cn/baidu.com这个网址的，但是却还是https://juejin.cn，是因为Nginx层，设置了https://juejin.cn后面除post外，其他字符串全部重定向去https://juejin.cn

就直接在网页上输入https://juejin.cn/abc也是会重定向到https://juejin.cn

神奇的跳转

看了一个不会跳转的，下面再来看一个神奇的跳转

https://ar5iv.labs.arxiv.org/html/2005.11401

上面这个网址在控制台执行window.location.href = ‘baidu.com’，会跳转到哪里？

https://arxiv.org/abs/baidu.com

这次连域名都变化了，而且还出现了/abs，这是不是很神奇？

为什么会这样子？

还是按原本逻辑来分析，https://ar5iv.labs.arxiv.org/html/2005.11401跳转应该是去https://ar5iv.labs.arxiv.org/html/baidu.com；

https://ar5iv.labs.arxiv.org/html/baidu.com这样访问肯定是不存在这个网址的，有些网站会显示页面，然后404；

直接在网页上输入https://ar5iv.labs.arxiv.org/html/baidu.com，就会自动跳转到https://arxiv.org/abs/baidu.com

然后我们能够看的状态码是307

HTTP状态码307代表“Temporary Redirect”，即临时重定向。当服务器返回这个状态码时，它指示客户端应该使用GET方法（而不是POST或其他方法）来访问一个新的URL，并且这个重定向是临时的，客户端应该在以后的请求中继续使用原来的URL。

307状态码通常用于以下情况：

服务器端的URL重写：服务器可能需要临时将请求重定向到另一个URL，例如，为了处理URL路径的变更或者进行负载均衡。
会话保持：在重定向过程中，服务器希望保持原有的POST请求数据，而不是让客户端重新提交数据。这与状态码301（永久重定向）不同，301状态码通常用于永久性的URL变更，客户端在以后的请求中应该使用新的URL。
缓存处理：某些缓存策略可能需要在不改变客户端请求的情况下，临时地将请求重定向到另一个URL。

当客户端收到307状态码时，它应该遵循服务器提供的Location响应头中的URL进行重定向。这个新的URL可能是临时的，客户端在后续的请求中应该继续使用原始的URL。

这篇文章到这里就结束了，其实打开控制台，修改location.href的作用，就跟你打开一个新的浏览器tab一样，随便你如何更改这个url地址。不过页面如何变化，是你控制不了的，这与这个页面的服务息息相关。

也有你访问的地址不存在的情况，就会出现无法访问的情况。