从另一个域加载 iframe 时,有什么方法可以捕获错误。这是 jsfiddle 中的一个示例。http://jsfiddle.net/2Udzu/。如果我收到错误消息,我需要显示一条消息。
这是我想做的,但它不起作用:
$('iframe')[0].onerror = function(e) {
alert('There was an error loading the iFrame');
}
有人有想法么?
从另一个域加载 iframe 时,有什么方法可以捕获错误。这是 jsfiddle 中的一个示例。http://jsfiddle.net/2Udzu/。如果我收到错误消息,我需要显示一条消息。
这是我想做的,但它不起作用:
$('iframe')[0].onerror = function(e) {
alert('There was an error loading the iFrame');
}
有人有想法么?
onerror
仅适用于脚本错误。必须使用任何其他方法进行帧内容错误检查。这是一个例子。
<script>
function chkFrame(fr) {
if (!fr.contentDocument.location) alert('Cross domain');
}
</script>
<iframe src="http://www.google.com/" onload="chkFrame(this)"></iframe>
由于跨域限制,无法检测页面是否加载成功,或者页面是否由于客户端错误(HTTP 4xx 错误)和服务器错误(HTTP 5xx 错误)而无法加载。
我正在使用以下代码来检测是否发生了 x-frame-option 错误或另一个与 jquery
$(iframe).load(function (e) {
try
{
// try access to check
console.log(this.contentWindow.document);
// Access possible ...
}
catch (e)
{
// Could not access. Read out error type
console.log(e);
var messageLC = e.message.toLowerCase();
if (messageLC.indexOf("x-frame-options") > -1 || messageLC.indexOf('blocked a frame with origin') > -1 || messageLC.indexOf('accessing a cross-origin') > -1)
{
// show Error Msg with cause of cross-origin access denied
}
else
{
// Shoe Error Msg with other cause
}
}
});
如果您可以访问父站点和 iframe-url,则了解页面已完全加载(没有“相同来源”问题)的一种方法是从子站点向父站点发送消息(postMessage),如下所示;
父网站(包含 iframe)
//Listen for message
window.addEventListener("message", function(event) {
if (event.data === "loading_success") {
//Yay
}
});
//Check whether message has come through or not
iframe_element.onload = function () {
//iframe loaded...
setTimeout(function() {
if (!iframeLoaded) {
//iframe loaded but no message from the site - URL not allowed
alert("Failure!");
}
}, 500);
};
子网站(来自 iframe 的 URL)
parent.postMessage("loading_success", "https://the_origin_site.url/");
如果您想要多个来源的可能性,您可以the_origin_site.url
使用像 PHP 这样的服务器端语言
仅当您尝试放入 iframe 的域与您请求的域相同时,接受的答案才有效 - 此解决方案适用于您可以访问两个域上的脚本的跨域。