在页面加载时检测 404 错误答案

【问题标题】：detect 404 error on page load在页面加载时检测 404 错误
【发布时间】：2014-12-25 04:12:03
【问题描述】：

我在我的网站中嵌入了谷歌地图，有时谷歌会以 404 错误响应。我知道我应该知道这一点，但我不记得了，也不能很快找到。该网站上的其他 404 个 iframe 相关问题均未得到解答。

如何检查 javascript 中是否有 404 响应？我打算在响应为 404 时调用 location.reload()。

<iframe src="https://mapsengine.google.com/map/embed?mid=zGLD-nMIJQAg.k0gTyNlOPz_Q" width="640" height="480"></iframe>

错误代码是：

GET https://khms0.googleapis.com/kh?v=159&hl=en&x=784456&y=1636828&z=22&token=122715 404 (Not Found)

我试过这个：它没有帮助。

var url = 'https://mapsengine.google.com/map/embed?mid=zGLD-nMIJQAg.k0gTyNlOPz_Q';
if (url.statusCode === '404'){
    window.location.reload();
}

【问题讨论】：

我觉得解决404问题比较好。但是，如果您确定要重新加载...您如何获得地图？你能给我们看看代码吗？
如果不使用此版本的 Google 地图，我认为我无法解决 404 问题。
您确定您拥有正确的地图网址吗？它会在所有浏览器中出现问题吗？它有多频繁？这也不是一个好的解决方案。想想 url 会改变。浏览器将永远重新加载。
欢迎来到 Stack Overflow。最好的检查方法是使用获取请求来查看您是否获得 404 状态代码。您使用的谷歌地图网址可能存在一些问题，因为我的网站（使用他们的嵌入选项）在显示地图时从来没有 404。
现在我认为我页面上的某些内容阻止了地图的加载。其他地图服务也会发生这种情况。我必须深入挖掘。

标签： javascript http-status-code-404

【解决方案1】：

var url = 'https://mapsengine.google.com/map/embed?mid=zGLD-nMIJQAg.k0gTyNlOPz_Q';
function UrlExists(url) {
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    if (http.status != 404)
        //  do something
    else
        window.location.reload();
}

使用此函数并将 URL 作为参数传递。如果状态不是 404，则不会发生任何事情，或者您可以执行其他操作，它将根据您的要求刷新页面。

【讨论】：

对我来说，状态总是返回为0。

【解决方案2】：

我知道这是一个老问题，但这里有一个更新的方法，用 fetch（不适用于 IE）：

function urlExists(url, callback) {
  fetch(url, { method: 'head' })
  .then(function(status) {
    callback(status.ok)
  });
}

let url = 'https://mapsengine.google.com/map/embed?mid=zGLD-nMIJQAg.k0gTyNlOPz_Q';

urlExists(url, function(exists) {
  if (exists) {
    // it exists, do something
  } else {
    // it doesn't exist, do something else
  }
});

【讨论】：

控制台显示ok is not defined
上面的 fetch 和 XMLHttpRequest 方法的主要区别是什么？ XMLHttpRequest 使用 head 不是更有效吗？
@ArminNikdel 如果您使用一个，并打开您的开发控制台，您将收到一条消息：主线程上的同步 XMLHttpRequest 已被弃用，因为它对最终用户的体验产生不利影响。如需更多帮助 xhr.spec.whatwg.org 简单地说......它们对性能不利。