是否可以捕获window.location.replace事件? [英] Is it possible to capture the window.location.replace event?

问题描述

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

If I'm currently at the URL"example.com/somepage#somehash" and I invoke window.location.hash = "anotherhash", the URL changes to "example.com/somepage#anotherhash". This fires the 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".

If I am currently at the URL "example.com/somepage?a=1&b=two" and I invoke window.location.replace("?one=1&two=2"), then the URL changes to "example.com/somepage?one=1&two=2".

我已阅读 MDN文档 ，而且我找不到能触发的事件.

I've read the MDN docs, and I can't find an even that this fires.

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

注意:

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

Note:

It's my fault for saying that I want to make sure I don't trigger a page reload. I want to use the new URL for updating the page based on the query string, for example with an AJAX request. window.history.pushState is another option, but as far as I can tell, it does not fire an event either.

我看了@Taki的答案.我创建了 repl.it ，因为当您转到完整页面时，您可以看到URL发生了变化-页面预览.但是，即使使用preventDefault页面也正在重新加载，这可以通过以下事实证明:在unload事件回调中发布到页面的信息会消失.因此，这不能用于客户端路由，这是我的目标.

I took a look at @Taki's answer. I create a repl.it because you can see the URL change when you go to the full-page view. However, even with the preventDefault the page is reloading, which is proved by the fact that the info posted to the page in the unload event callback disappears. Consequently, this can't be used for client-side routing, which is my goal.

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

推荐答案

BeforeUnload 事件

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

Location.replace()方法将当前资源替换为 在提供的网址上输入一个

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

(不知道为什么它不能替换代码段:P中的window.location，但是它将在其外部起作用)

( don't know why it can't replace the window.location in the snippet :P but it'll work outside it )

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，如果它不触发事件，请创建一个自定义事件，将其附加到窗口并听:

apparently you can't prevent the page from reloading when changing location.href , but like you mentioned, you can use history.pushState and if it doesn't fire an event, create a custom one, attach it to the window and listen for it :

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

... 

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

这次是在代码段中运行，请注意它没有在重新加载，并且您将网址保留在历史记录中，并且得到了location

this time it's working inside the snippet, see that it's not reloading and you get to keep urls in the history and you get your 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事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！