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

IT技术 javascript iframe http-status-code-404
2021-01-22 00:36:18

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

6个回答

由于我的名声很低,我无法评论德里克我会功夫的回答。我已经尝试过该代码,但效果不佳。Derek 朕会功夫的密码共有三个问题。

  1. 第一个是异步发送请求并更改其属性“状态”的时间比执行下一个表达式 - if(request.status === "404") 慢。因此 request.status 最终将由于互联网带宽而保持状态 0(零),并且它不会实现下面的代码。解决这个问题很简单:在 ajax 请求的方法 open 上将“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.");
}
我很惊讶人们真的赞成这一点。请不要使用此解决方案。这种同步/“暂停”根本不被认为是最佳实践。尝试在浏览器调试中将油门设置为慢速 3G 连接进行测试,您会注意到用户在“暂停”发生时无法对页面进行任何操作。即使是其他答案中的 Jquery 解决方案也是异步方法的更好实践(即使您不想包含 jquery 也以它为例)
2021-03-16 00:36:18
不不不。请不要将 W3C 的任何内容链接到 W3 学校。他们没有任何关联。
2021-03-17 00:36:18
点赞,让他有足够的声望来评论德里克我会功夫的回答!(好的答案,不要让任何事情阻止你兄弟)
2021-03-19 00:36:18
请注意:主线程上的同步 XMLHttpRequest 已被弃用,因为它会对最终用户的体验产生不利影响。如需更多帮助,请查看xhr.spec.whatwg.org
2021-03-25 00:36:18
由于您的声誉低,加 1。(和很好的答案:))
2021-04-06 00:36:18

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

但请注意,它仅适用于同一来源。对于另一台主机,您将不得不使用服务器端语言来做到这一点,您必须自己弄清楚。

@JerryGoyal 用反引号 (`) 包裹它
2021-03-24 00:36:18
@Mario - 是的,只要它由于同源策略而处于相同的起源。
2021-03-25 00:36:18
@Derek 我会功夫 你是怎么加灰色BG评论的?#好奇的
2021-03-30 00:36:18
很好的答案 - 但如果需要并且如果他们控制该资源,程序员可以随意允许跨源请求;即使在那种情况下,这仍然是一个很好的答案。
2021-03-31 00:36:18
您还可以使用 >= 400 来捕获所有 http 错误代码。
2021-04-11 00:36:18

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

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.");
});
jquery 是完全有效的——至少你可以弄清楚他们是如何做到的并复制它。未来我们可能会遇到一个并非所有浏览器都是 Chromium 的世界。
2021-03-26 00:36:18
这不是普通的 javascript,这是 jQuery。我认为人们不会来这里寻找 jQuery 答案。
2021-03-27 00:36:18
这个问题没有被标记为“jquery”,我不认为来这里的人正在寻找使用这个库的解决方案。
2021-04-10 00:36:18

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

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

您可以通过 AJAX 测试 url 并读取状态代码 - 即 URL 是否在同一域中。

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