是否可以捕获 window.location.replace 事件？

Question

如果我当前在 URL"example.com/somepage#somehash" 并调用 window.location.hash = "anotherhash"，URL 将更改为 "example.com/somepage#anotherhash"。这会触发 window.hashashchange 事件。

如果我当前在 URL "example.com/somepage?a=1&b=two" 并调用 window.location.replace("?one=1&two=2")，则 URL 变为 "example.com/somepage?one=1&two=2"。

我已经阅读了 MDN docs，但我找不到它触发的偶数。

有吗？
如果没有，是否有捕获该事件的简单方法？

注：

说我想确保不触发页面重新加载是我的错。我想使用新的 URL 来根据查询字符串更新页面，例如使用 AJAX 请求。 window.history.pushState 是另一种选择，但据我所知，它也不会触发事件。

编辑

看了@Taki 的回答。我创建了一个 repl.it，因为当您进入整页视图时，您可以看到 URL 的变化。但是，即使 preventDefault 页面仍在重新加载，卸载事件回调中发布到页面的信息消失这一事实证明了这一点。因此，这不能用于客户端路由，这是我的目标。

index.html

<button id="myBtn">Click me</button>
<div id="info"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="index.js"></script>

index.js

console.log("index.js");

$('#myBtn').on('click', function(e)
{
  console.log("button clicked")
  window.location.replace("?one=1&two=2")
  console.log(window.location.href);
});

$(window).on("beforeunload", function (event) 
{
  event.preventDefault(); // just to pause and see the cosdole
  console.log("beforeunload");
  console.log(event);
  $('#info').append("<p>beforeunload</p>");
  console.log(window.location.href); // capture the url
});

Answer 1

不，不存在这样的事件，检测此类事件即将发生的最简单方法是围绕历史设置代理 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

或者您可以只覆盖它的方法。

Answer 2

window.location.replace acts like a redirection, so you can listen for the BeforeUnload 事件

The Location.replace() method replaces the current resource with the one at the provided URL

（不知道为什么它不能替换片段中的 window.location :P 但它会在它之外工作）

document.querySelector('#myBtn').addEventListener('click', function(){
  window.location.replace("?one=1&two=2")
});

window.addEventListener("beforeunload", function (event) {

  console.log(window.location.href); // capture the url
  event.preventDefault(); // just to pause and see the condole
  
});

<button id="myBtn">Click me</button>

编辑：

显然您无法在更改 location.href 时阻止页面重新加载，但是就像您提到的那样，您可以使用 history.pushState 如果它没有触发事件，请创建一个自定义事件，将其附加到 window 并收听它：

let evt = new CustomEvent('myEvent', ...
window.dispatchEvent(evt); 

... 

window.addEventListener('myEvent', function(e){ ...

这次它在代码段内运行，看到它没有重新加载，您可以将 url 保留在历史记录中，您可以得到 location

document.querySelectorAll('a').forEach(function(elem){
  
  elem.addEventListener('click', function(e){
   
    e.preventDefault();
    window.history.pushState("object or string", "Title", this.href);
    
    let evt = new CustomEvent('urlChange');
    window.dispatchEvent(evt);
    
  });
   
}); 

window.addEventListener('urlChange', function(e){
  document.querySelector('#myUrl').innerHTML = window.location.href;
});

#myUrl{
  display: block;
  font-size: 20px;
  margin-top: 20px;
}

<h1>hello</h1>
<a href="/one">Got to One</a><br />
<a href="/two">Got to Two</a><br />
<a href="?three=3">Got to Three</a><br />

<span id="myUrl"></span>

是否可以捕获 window.location.replace 事件？

Is it possible to capture the window.location.replace event?

javascript

html

dom-events

hashchange

注：

编辑