使用javascript来检测在iframe中显示之前是否存在url

Question

我正在使用javascript将动态网址传递给iframe src.但有时网址不存在,我怎么能事先检测到不存在的网址,以便我可以隐藏带有404错误的iframe.

Answer 1

由于我声誉不佳,我无法评论Derek朕会功夫的回答.我已经尝试过该代码,但它运行不正常.Derek朕会功夫的代码有三个问题.

1. 第一个是异步发送请求并更改其属性"status"的时间慢于执行下一个表达式 - 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.");
}

Answer 2

使用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();

但请注意,它只适用于相同的原点.对于另一台主机,您必须使用服务器端语言来执行此操作,您必须自己解决这个问题.

Answer 3

我发现这在我的情况下有效。

jQuery 1.5中不推荐使用jqXHR.success（），jqXHR.error（）和jqXHR.complete（）回调方法。要准备将其最终删除的代码，请改用jqXHR.done（），jqXHR.fail（）和jqXHR.always（）。

$.get("urlToCheck.com").done(function () {
  alert("success");
}).fail(function () {
   alert("failed.");
});

Answer 4

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

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

Answer 5

您可以尝试在页面上执行简单的 GET，如果返回 200，则表示该页面存在。试试这个（使用jQuery），该函数是页面加载成功时的成功回调函数。请注意，这仅适用于您域内的网站，以防止 XSS。其他域必须在服务器端处理

$.get(
   yourURL,
   function(data, textStatus, jqXHR) {
      //load the iframe here...
   }
);