如何检查JavaScript中的URL是否已更改?例如,使用AJAX的GitHub之类的网站将在#符号后附加页面信息以创建唯一URL,而无需重新加载页面。检测此URL是否更改的最佳方法是什么?
- 是否
onload
再次调用该事件? - URL是否有事件处理程序?
- 还是必须每秒检查一次URL以检测更改?
在现代浏览器(IE8 +,FF3.6 +,Chrome)中,您可以在上收听hashchange
事件window
。
在某些旧的浏览器中,您需要一个计时器来不断检查location.hash
。如果您使用的是jQuery,则有一个插件可以完全做到这一点。
我希望能够添加locationchange
事件侦听器。经过下面的修改,我们就可以做到,像这样
window.addEventListener('locationchange', function(){
console.log('location changed!');
})
相反,window.addEventListener('hashchange',()=>{})
只有在url中的#标签后面的部分发生更改并且window.addEventListener('popstate',()=>{})
并不总是起作用时,才会触发。
此修改类似于Christian的答案,修改了历史对象以添加一些功能。
默认情况下,有一个popstate
事件,但没有针对pushstate
和的事件replacestate
。
这会修改这三个功能,使所有的消防自定义locationchange
事件供您使用,也pushstate
和replacestate
活动,如果你想使用这些:
/* These are the modifications: */
history.pushState = ( f => function pushState(){
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event('pushstate'));
window.dispatchEvent(new Event('locationchange'));
return ret;
})(history.pushState);
history.replaceState = ( f => function replaceState(){
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event('replacestate'));
window.dispatchEvent(new Event('locationchange'));
return ret;
})(history.replaceState);
window.addEventListener('popstate',()=>{
window.dispatchEvent(new Event('locationchange'))
});
使用此代码
window.onhashchange = function() {
//code
}
与jQuery
$(window).bind('hashchange', function() {
//code
});
经过一些研究后进行编辑:
似乎我被Mozilla文档中的文档所迷住了。该popstate
事件(和它的回调函数onpopstate
)都不会触发每当pushState()
或replaceState()
称为代码。因此,原始答案并不适用于所有情况。
但是,有一种方法可以通过根据@ alpha123猴子修补函数来避免这种情况:
var pushState = history.pushState;
history.pushState = function () {
pushState.apply(history, arguments);
fireEvents('pushState', arguments); // Some event-handling function
};
原始答案
假设此问题的标题是“如何检测URL更改”,那么当您想知道完整路径何时更改(而不仅是哈希锚)发生时,答案就是可以侦听popstate
事件:
window.onpopstate = function(event) {
console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
目前(2017年1月),全球92%的浏览器都支持popstate。
使用jquery(和插件),您可以执行
$(window).bind('hashchange', function() {
/* things */
});
http://benalman.com/projects/jquery-hashchange-plugin/
否则,您将必须使用setInterval并检查hash事件(window.location.hash)中的更改。
更新!一个简单的草稿
function hashHandler(){
this.oldHash = window.location.hash;
this.Check;
var that = this;
var detect = function(){
if(that.oldHash!=window.location.hash){
alert("HASH CHANGED - new has" + window.location.hash);
that.oldHash = window.location.hash;
}
};
this.Check = setInterval(function(){ detect() }, 100);
}
var hashDetection = new hashHandler();
添加哈希更改事件侦听器!
window.addEventListener('hashchange', function(e){console.log('hash changed')});
或者,侦听所有URL更改:
window.addEventListener('popstate', function(e){console.log('url changed')});
这比下面的代码要好,因为window.onhashchange中只能存在一件事,并且您可能会覆盖其他人的代码。
// Bad code example
window.onhashchange = function() {
// Code that overwrites whatever was previously in window.onhashchange
}
这个解决方案为我工作:
var oldURL = "";
var currentURL = window.location.href;
function checkURLchange(currentURL){
if(currentURL != oldURL){
alert("url changed!");
oldURL = currentURL;
}
oldURL = window.location.href;
setInterval(function() {
checkURLchange(window.location.href);
}, 1000);
}
checkURLchange();
虽然是一个老问题,但位置栏项目非常有用。
var LocationBar = require("location-bar");
var locationBar = new LocationBar();
// listen to all changes to the location bar
locationBar.onChange(function (path) {
console.log("the current url is", path);
});
// listen to a specific change to location bar
// e.g. Backbone builds on top of this method to implement
// it's simple parametrized Backbone.Router
locationBar.route(/some\-regex/, function () {
// only called when the current url matches the regex
});
locationBar.start({
pushState: true
});
// update the address bar and add a new entry in browsers history
locationBar.update("/some/url?param=123");
// update the address bar but don't add the entry in history
locationBar.update("/some/url", {replace: true});
// update the address bar and call the `change` callback
locationBar.update("/some/url", {trigger: true});
要收听网址更改,请参见以下内容:
window.onpopstate = function(event) {
console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
如果您打算在某些特定条件后停止/删除监听器,请使用此样式。
window.addEventListener('popstate', function(e) {
console.log('url changed')
});
在做一些chrome扩展时,我遇到了一个附加问题:有时,页面更改而不是URL。
例如,只需转到Facebook主页,然后单击“主页”按钮。您将重新加载页面,但URL不会更改(一页应用程序样式)。
99%的时间,我们正在开发网站,以便我们可以从Angular,React,Vue等框架中获取这些事件。
但是,在我使用Chrome扩展程序(在Vanilla JS中)的情况下,我不得不听一个事件,该事件将为每个“页面更改”触发,通常可以通过URL更改来捕获该事件,但有时却不会。
我的自制解决方案如下:
listen(window.history.length);
var oldLength = -1;
function listen(currentLength) {
if (currentLength != oldLength) {
// Do your stuff here
}
oldLength = window.history.length;
setTimeout(function () {
listen(window.history.length);
}, 1000);
}
因此,基本上是将leoneckert解决方案应用于窗口历史记录,当单个页面应用程序中的页面发生更改时,该解决方案将会更改。
考虑到我们在这里只检查一个整数相等,而不是更大的对象或整个DOM,因此不是火箭科学,而是我发现的最干净的解决方案。
查看jQuery卸载功能。它处理所有事情。
https://api.jquery.com/unload/
当用户离开页面时,将把卸载事件发送到window元素。这可能意味着很多事情之一。用户可能已经单击了链接以离开该页面,或者可以在地址栏中输入新的URL。前进和后退按钮将触发事件。关闭浏览器窗口将导致事件被触发。即使页面重新加载也会首先创建一个卸载事件。
$(window).unload(
function(event) {
alert("navigating");
}
);
window.addEventListener("beforeunload", function (e) {
// do something
}, false);
下面的答案来自这里(使用旧的JavaScript语法(无箭头功能,支持IE 10+)):https :
//stackoverflow.com/a/52809105/9168962
(function() {
if (typeof window.CustomEvent === "function") return false; // If not IE
function CustomEvent(event, params) {
params = params || {bubbles: false, cancelable: false, detail: null};
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
}
window.CustomEvent = CustomEvent;
})();
(function() {
history.pushState = function (f) {
return function pushState() {
var ret = f.apply(this, arguments);
window.dispatchEvent(new CustomEvent("pushState"));
window.dispatchEvent(new CustomEvent("locationchange"));
return ret;
};
}(history.pushState);
history.replaceState = function (f) {
return function replaceState() {
var ret = f.apply(this, arguments);
window.dispatchEvent(new CustomEvent("replaceState"));
window.dispatchEvent(new CustomEvent("locationchange"));
return ret;
};
}(history.replaceState);
window.addEventListener("popstate", function() {
window.dispatchEvent(new CustomEvent("locationchange"));
});
})();
可以执行此操作的另一种简单方法是,通过在类的名称上添加click事件,将其添加到页面上的锚标签中以检测何时单击了该事件,然后您可以使用window.location.href来获取网址数据您可以用来向服务器运行ajax请求。简单又容易。
在一个单独的线程中找到了一个可行的答案:
没有一个事件可以一直有效,对于大多数主要的SPA来说,修补pushState事件的猴子是很受欢迎的。
因此,智能轮询是最适合我的方法。您可以添加任意数量的事件类型,但是这些事件对我来说似乎做得很好。
为TS编写,但易于修改:
const locationChangeEventType = "MY_APP-location-change";
// called on creation and every url change
export function observeUrlChanges(cb: (loc: Location) => any) {
assertLocationChangeObserver();
window.addEventListener(locationChangeEventType, () => cb(window.location));
cb(window.location);
}
function assertLocationChangeObserver() {
const state = window as any as { MY_APP_locationWatchSetup: any };
if (state.MY_APP_locationWatchSetup) { return; }
state.MY_APP_locationWatchSetup = true;
let lastHref = location.href;
["popstate", "click", "keydown", "keyup", "touchstart", "touchend"].forEach((eventType) => {
window.addEventListener(eventType, () => {
requestAnimationFrame(() => {
const currentHref = location.href;
if (currentHref !== lastHref) {
lastHref = currentHref;
window.dispatchEvent(new Event(locationChangeEventType));
}
})
})
});
}
用法
observeUrlChanges((loc) => {
console.log(loc.href)
})
您setInterval
在每次通话时都开始一个新通话,而不会取消前一个通话-可能您只是想拥有一个通话setTimeout
文章标签:ajax , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!