47

I'm using javascript to pass a dynamic url to iframe src. but sometimes the url does not exist, how could i detect the non-exist url beforehand, so that i can hide the iframe that with 404 error.

4

8 回答 8

88

由于我的声誉很低，我无法评论Derek 朕会功夫的回答。我已经按原样尝试了该代码，但效果不佳。朕会功夫的密码一共有三个问题。

  1. 首先是异步发送请求并更改其属性“状态”的时间比执行下一个表达式 - if(request.status === "404") 慢。所以 request.status 最终将由于互联网带宽，保持在状态 0（零），并且它不会实现下面的代码。要解决这个问题很容易：在 ajax 请求的方法打开时将“true”更改为“false”。这将导致您的代码出现短暂（或不是）阻塞（由于同步调用），但会在到达 if 测试之前更改请求的状态。

  2. 第二个是状态是整数。使用 '===' javascript 比较运算符，您尝试比较左侧对象是否与右侧对象相同。要完成这项工作，有两种方法：

    • 去掉 404 周围的引号，使其成为整数；
    • 使用 javascript 的运算符 '==' 这样您就可以测试这两个对象是否相似。

  3. 第三是对象 XMLHttpRequest 仅适用于较新的浏览器（Firefox、Chrome 和 IE7+）。如果您希望该片段适用于所有浏览器，您必须按照 W3Schools 建议的方式进行操作：w3schools ajax

真正对我有用的代码是：

var request;
if(window.XMLHttpRequest)
    request = new XMLHttpRequest();
else
    request = new ActiveXObject("Microsoft.XMLHTTP");
request.open('GET', 'http://www.mozilla.org', false);
request.send(); // there will be a 'pause' here until the response to come.
// the object request will be actually modified
if (request.status === 404) {
    alert("The page you are trying to reach is not available.");
}
于 2014-02-28T14:33:26.667 回答
40

使用 XHR 并查看它是否响应 404。

var request = new XMLHttpRequest();  
request.open('GET', 'http://www.mozilla.org', true);
request.onreadystatechange = function(){
    if (request.readyState === 4){
        if (request.status === 404) {  
            alert("Oh no, it does not exist!");
        }  
    }
};
request.send();

但请注意，它仅适用于同一来源。对于另一台主机，您将不得不使用服务器端语言来执行此操作，您必须自己弄清楚。

于 2012-06-07T06:50:42.810 回答
10

我发现这在我的场景中有效。

jQuery 1.5 中引入的 jqXHR.success()、jqXHR.error() 和 jqXHR.complete() 回调方法自 jQuery 1.8 起已弃用。要为最终删除准备代码，请改用 jqXHR.done()、jqXHR.fail() 和 jqXHR.always()。

$.get("urlToCheck.com").done(function () {
  alert("success");
}).fail(function () {
   alert("failed.");
});
于 2014-12-03T09:37:53.727 回答
5

我创建了这个方法，它非常理想，因为它在不完整下载的情况下中止连接，非常适合检查视频或大图像是否存在，减少响应时间和下载整个文件的需要

// if-url-exist.js v1
function ifUrlExist(url, callback) {
    let request = new XMLHttpRequest;
    request.open('GET', url, true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    request.setRequestHeader('Accept', '*/*');
    request.onprogress = function(event) {
        let status = event.target.status;
        let statusFirstNumber = (status).toString()[0];
        switch (statusFirstNumber) {
            case '2':
                request.abort();
                return callback(true);
            default:
                request.abort();
                return callback(false);
        };
    };
    request.send('');
};

使用示例：

ifUrlExist(url, function(exists) {
    console.log(exists);
});
于 2021-01-11T18:38:04.593 回答
2

您可以通过 AJAX 测试 url 并读取状态代码 - 也就是说，如果 URL 在同一个域中。

如果它是远程域，您可以在自己的域中使用服务器脚本检查远程 URL。

于 2012-06-07T06:50:56.587 回答
1

你可以尝试在页面上做一个简单的 GET，如果你得到 200 就意味着页面存在。试试这个（使用jQuery），该函数是页面加载成功时的成功回调函数。请注意，这仅适用于您域内的站点以防止 XSS。其他域必须在服务器端处理

$.get(
   yourURL,
   function(data, textStatus, jqXHR) {
      //load the iframe here...
   }
);
于 2012-06-07T06:50:23.733 回答
0

无需单独发出 HTTP 请求进行事先检查。

您可以切换逻辑：仅在 iframe 已成功加载时才显示它。为此，您可以将onload事件侦听器附加到 iframe。

有关详细信息，请参阅此相关问题：捕获 iframe 加载完成事件

于 2021-10-26T10:19:58.333 回答
0

使用async/await，这对我打开新标签很有用；出于与 OP 相同的原因，我需要检测 404：

openHelp : async function(iPossiblyBogusURL) {
    const defaultURL = `http://guaranteedToWork.xyz`;
    const response = await fetch(iPossiblyBogusURL);

    if (response.status == 200) {
        window.open(iPossiblyBogusURL, `_blank`);
    } else if (response.status === 404) {
        window.open(defaultURL, `_blank`);   
    }
},
于 2021-10-23T15:03:02.757 回答