我正在使用 javascript 将动态 url 传递到 iframe src。但有时url不存在,我怎样才能事先检测到不存在的url,以便我可以隐藏出现404错误的iframe。
由于我的声誉较低,我无法对 Derek 朕会功夫的回答发表评论。 我已经尝试过该代码,但效果不佳。 Derek 朕会功夫的代码存在三个问题。
第一个是异步发送请求并更改其属性“status”的时间比执行下一个表达式慢 - if(request.status === "404")。因此,由于互联网带宽的原因,request.status 最终将保持状态 0(零),并且它不会实现下面 if 的代码。要解决这个问题很简单:在 ajax 请求的 open 方法上将“true”更改为“false”。这将导致您的代码短暂(或不那么)阻塞(由于同步调用),但会在到达 if 测试之前更改请求的状态。
第二个是status是一个整数。使用'===' JavaScript 比较运算符,您尝试比较左侧对象是否与右侧对象相同。要实现这项工作,有两种方法:
第三,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.");
}
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();
但请注意,它仅适用于同一来源。对于另一台主机,您将必须使用服务器端语言来做到这一点,您必须自己弄清楚。
我发现这在我的场景中有效。
从 jQuery 1.8 开始,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.");
});
更新:2024 年 7 月 2 日
无需下载内容。你只要用 HEAD 方法下载请求头,你就已经知道是否有错误了。
使用 FETCH 和 HEAD 的方法
// if-url-exist.js v2
async function ifUrlExist(url) {
return new Promise((resolve, reject) => {
fetch(url, {
method: "HEAD"
}).then(response => {
resolve(response.status.toString()[0] === "2")
}).catch(error => {
reject(false)
})
})
}
// using
const hasUrl = await ifUrlExist(url)
if (hasUrl) {
// ...
}
我创建了这个方法,它是理想的,因为它会中止连接而不下载完整的文件,非常适合检查视频或大图像是否存在,减少响应时间和下载整个文件的需要
使用 XHR 和 GET 的方法
// 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。
使用
async/await
,这对我打开新选项卡很有用;我需要检测 404 的原因与 OP 相同:
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`);
}
},
$.get(
yourURL,
function(data, textStatus, jqXHR) {
//load the iframe here...
}
);