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

如果我当前位于该 URL"example.com/somepage#somehash"我调用window.location.hash = "anotherhash"，网址更改为"example.com/somepage#anotherhash"。这会触发window.hashashchange event.

如果我当前位于该 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 https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange，我什至找不到一个能引发这种情况的东西。

1. 有吗？
2. 如果没有，是否有一种简单的方法来捕获该事件？

Note:

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

Edit

我看了@Taki的回答。我创建一个repl.it https://repl.it/@abalter/windowlocationreplace-event因为当您进入全页视图时，您可以看到 URL 发生变化。然而，即使preventDefault页面正在重新加载，这一点可以通过卸载事件回调中发布到页面的信息消失来证明。因此，这不能用于客户端路由，这是我的目标。

索引.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
});

窗口.位置.替换 https://developer.mozilla.org/en-US/docs/Web/API/Location/replace其作用类似于重定向，因此您可以监听卸载前 https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload event

The 位置.replace()方法将当前资源替换为 位于提供的 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>

EDIT :

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

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

... 

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

这次它在代码片段内工作，看到它没有重新加载，并且您可以将网址保留在历史记录中，然后您就可以得到您的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>