Question

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

如果我当前位于网址"example.com/somepage?a=1&b=two"并且我调用window.location.replace("?one=1&two=2")，则网址将更改为"example.com/somepage?one=1&two=2"。

我已经阅读了MDN docs，即便如此，我也找不到。

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

注意：

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

修改

我看了@Taki的回答。我创建了一个repl.it，因为您可以在转到整页视图时看到网址更改。但是，即使页面正在重新加载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

window.location.replace就像重定向一样，因此您可以倾听BeforeUnload事件

Location.replace（）方法用。替换当前资源一个在提供的URL

（不知道为什么它无法替换代码段中的SELECT c.id as companyID, u.id as userID, u.createdAt FROM companies as c JOIN policies as p on p.companyId = c.id JOIN users as u on u.policyId = p.id JOIN (SELECT c.id as companyID, min(u.createdAt) as min_dt FROM companies as c JOIN policies as p on p.companyId = c.id JOIN users as u on u.policyId = p.id GROUP BY c.id) sub on c.id=sub.companyID where u.createdAt=sub.min_dt：P但它会在其外部工作）

＆＃13;

window.location

＆＃13;

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
  
});

＆＃13;

编辑：

显然，您无法在更改<button id="myBtn">Click me</button>时阻止网页重新加载，但就像您提到的那样，您可以使用location.href，如果它没有触发事件，请创建一个自定义一个，将它附加到窗口并听取它：

history.pushState

这次它在代码片段内工作，看到它没有重新加载，你可以保留历史记录中的网址并获得let evt = new CustomEvent('myEvent', ... window.dispatchEvent(evt); ... window.addEventListener('myEvent', function(e){ ...

＆＃13;

location

＆＃13;

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;
});

＆＃13;

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

＆＃13;

Answer 2

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

或者你可以覆盖它的方法。

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

注意：

修改

2 个答案: