javascript - 如何结合 window.location.href 和 DOMContentLoaded

Question

我正在使用 ipinfo.io 来检测访问者所在的国家/地区，然后使用基于该国家/地区的附加查询字符串重新加载页面。当页面加载时，我想在 DOMContentLoaded 之后做一些事情。

如果我不重新加载页面，DOMContentLoaded 可以正常调用，但我希望它与重新加载一起工作。我该如何实现？

示例代码如下:

jQuery.getJSON('https://ipinfo.io', function(data){
    if(data){
        if(data.country){
            if(data.country.toLowerCase()=='us')
            {
                window.location.replace(window.location.href+"?location=us");
            }
        }
    }
});

//works when page is not reloaded
document.addEventListener("DOMContentLoaded",
   function() {
    doSomething...
});

Answer 1

此处存在竞争条件:根据您的描述，getJSON 命令可能与 DOMContentLoaded 事件“竞争”。如果 getJSON 在您的 DOM 准备就绪之前成功，那么它将重定向页面并停止页面上的所有脚本执行。

为避免这种情况，请尝试将 getJSON 移动到 DOMContentLoaded 回调中。

document.addEventListener("DOMContentLoaded", function() {

  jQuery.getJSON('https://ipinfo.io', function(data) {
    if (data) {
      if (data.country) {
        if (data.country.toLowerCase() == 'us') {
          window.location.replace(window.location.href + "?location=us");
        }
      }
    }
  });

  // Other logic here

});

附带说明，您可以通过组合三个 if 语句来避免三重嵌套(并记住尽可能使用严​​格比较，===):

jQuery.getJSON('https://ipinfo.io', function(data) {
    if (data && data.country && data.country.toLowerCase() === 'us') {
        window.location.replace(window.location.href + "?location=us");
    }
}