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属性没有变化
在控制台执行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地址。不过页面如何变化,是你控制不了的,这与这个页面的服务息息相关。
也有你访问的地址不存在的情况,就会出现无法访问的情况。