前端 - location.href 和 window.open 的区别是什么？

Question

事情是这样的：
某个 webscoket，
数据通过 window.addEventListener 做监听和发送，
由于某些原因增加了导航页，
并且不再同一个顶级的 nav 下面，
不过两个页面都有 webscoket 的启动，
自己测试的时候都能收到数据！好像没有问题

然后问题来了：
导航页把 window.open 切换到了 location.href ，
写在 window 里面的 webscoket 的防重连状态没有重置，
你没看错，location.href 渲染的 hash 页面的 没有清掉缓存？
所以 webscoket 防止重连触发了，
鬼吊的来了，window.addEventListener 被清掉了，
数据拿不到，
并且是单向的，导航页 nav => 业务页 plan 拿不到
方向反过来，业务页 plan => 导航页 nav 是能拿到数据的？？

有大佬解惑吗？

Answer 1

location.href 和 window.open 在 JavaScript 中都用于导航到新的页面，但它们之间存在一些关键的区别。

1. location.href

* `location.href` 是一个属性，它返回或设置当前文档的完整 URL。* 当你修改 `location.href` 的值时，浏览器会导航到新的 URL，类似于用户点击了一个链接。* 它不会创建新的浏览器窗口或标签页，而是在当前窗口或标签页中进行导航。* 如果新的 URL 指向的是同一个域下的页面，那么原页面的 JavaScript 环境（包括所有的全局变量、事件监听器等）会被保留。如果导航到的是不同域下的页面，那么原页面的 JavaScript 环境会被清除，出于安全原因（同源策略）。

2. window.open

* `window.open` 是一个方法，它用于打开一个新的浏览器窗口或标签页。* 它接受一个 URL 作为参数，并返回新打开窗口的引用。* 新窗口有自己的 JavaScript 环境，与原窗口完全隔离。* 如果新窗口导航到的是与原窗口不同域的页面，那么原窗口的 JavaScript 环境不会被影响。

对于你遇到的问题，可能是由于 location.href 和 window.open 之间的这些差异导致的。由于你提到导航页和业务页都有 websocket 的启动，并且当导航页使用 location.href 进行导航时，websocket 的防重连状态没有被重置，这可能导致了一些问题。

当你使用 location.href 导航时，如果新的 URL 指向的是同一个域下的页面，原页面的 JavaScript 环境会被保留。这意味着 websocket 的连接和事件监听器可能仍然存在。但是，如果 websocket 的防重连逻辑没有正确处理这种情况，它可能会误认为连接仍然有效，从而不触发重连机制。

另一方面，当你使用 window.open 打开新窗口时，新窗口有自己的 JavaScript 环境，与原窗口完全隔离。因此，新窗口中的 websocket 连接和事件监听器是独立的，不会受到原窗口的影响。

至于你提到的 window.addEventListener 被清掉的问题，这可能是由于页面导航导致的。当页面导航到新的 URL 时，原页面的所有 JavaScript 环境都会被清除（如果是跨域导航的话），包括通过 addEventListener 添加的事件监听器。这可能是导致你无法从导航页接收到数据的原因。

为了解决这个问题，你可以尝试以下方法：

1. 确保 websocket 的防重连逻辑能够正确处理页面导航的情况。当页面导航到新的 URL 时，应该关闭旧的 websocket 连接并尝试重新建立连接。
2. 如果可能的话，使用 window.postMessage 和 MessageEvent 在不同窗口之间传递数据，而不是依赖于 websocket。这样可以避免由于页面导航导致的 JavaScript 环境清除问题。
3. 确保在添加事件监听器时使用正确的参数和上下文，以确保监听器在页面导航后仍然有效。

希望这些信息能够帮助你解决问题！如果还有其他疑问或需要进一步的解释，请随时提问。