如何在JavaScript中哈希后检测URL是否已更改

2020/10/26 18:23 · javascript ·  · 0评论

如何检查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事件供您使用,也pushstatereplacestate活动,如果你想使用这些:

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

Mozilla文档中popstate的参考

目前(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

本文地址:http://javascript.askforanswer.com/ruhezaijavascriptzhonghaxihoujianceurlshifouyigenggai.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!