如果iframe src无法加载,则会出现捕获错误.错误: - "拒绝在框架中显示'http://www.google.co.in/'.."

Question

我Knockout.js用来绑定iframe src标签(这可以根据用户进行配置).

现在,如果用户已配置http://www.google.com(我知道它不会在iframe中加载,这就是为什么我将其用于-ve场景)并且必须在IFrame中显示.但它会引发错误: -

拒绝在框架中显示" http://www.google.co.in/ ",因为它将"X-Frame-Options"设置为"SAMEORIGIN".

我为iframe提供了以下代码: -

<iframe class="iframe" id="iframe" data-bind="attr: {src: externalAppUrl, height: iframeheight}">
    <p>Hi, This website does not supports IFrame</p>
</iframe>

我想要的是,如果网址无法加载.我想显示自定义消息. 骗子在这里

现在,如果我使用onload和onerror作为: -

<iframe id="browse" style="width:100%;height:100%" onload="alert('Done')" onerror="alert('Failed')"></iframe>

它可以正常加载w3schools.com,但不能与google.com.

其次: - 如果我把它作为一个功能,并尝试像我在我的小提琴,它不起作用.

<iframe id="browse" style="width:100%;height:100%" onload="load" onerror="error"></iframe>

我不知道如何让它运行并捕获错误.

编辑: - 我已经看到如果iframe没有在stackoverflow中加载或加载问题,想要调用函数,但它显示可以在iframe中加载的网站的错误.

另外,我已经在加载事件上看了Stackoverflow iframe 谢谢!!

Answer 1

由于浏览器设置的同源策略,您无法从客户端执行此操作.除了宽度和高度等基本属性之外,您无法从iFrame获取更多信息.

此外,谷歌在其响应标题中设置了SAMEORIGIN 的" X-Frame-Options ".

即使您对谷歌进行了ajax调用,您也无法检查响应,因为浏览器强制实施同源策略.

因此,唯一的选择是从您的服务器发出请求,看看您是否可以在IFrame中显示该网站.

因此,在您的服务器上......您的网络应用程序会向www.google.com发出请求,然后检查响应以查看它是否具有X-Frame-Options的标头参数.如果确实存在,那么您就知道IFrame会出错.

Answer 2

我认为您可以绑定loadiframe的事件,当iframe内容完全加载时会触发事件.

同时你可以启动一个setTimeout,如果加载了iFrame,则清除超时或者让超时触发.

码:

var iframeError;

function change() {
    var url = $("#addr").val();
    $("#browse").attr("src", url);
    iframeError = setTimeout(error, 5000);
}

function load(e) {
    alert(e);
}

function error() {
    alert('error');
}

$(document).ready(function () {
    $('#browse').on('load', (function () {
        load('ok');
        clearTimeout(iframeError);
    }));

});

演示:http://jsfiddle.net/IrvinDominin/QXc6P/

第二个问题

这是因为你错过了内联函数调用中的parens; 尝试改变这个:

<iframe id="browse" style="width:100%;height:100%" onload="load" onerror="error"></iframe>

进入这个:

<iframe id="browse" style="width:100%;height:100%" onload="load('Done func');" onerror="error('failed function');"></iframe>

演示:http://jsfiddle.net/IrvinDominin/ALBXR/4/

Answer 3

onload将始终触发,我解决此问题使用try catch block.当您尝试获取contentDocument时,它将抛出异常.

iframe.onload = function(){
   var that = $(this)[0];
   try{
        that.contentDocument;
   }
   catch(err){
        //TODO 
   }
}

Answer 4

这是对Edens答案的略微修改-对我来说，Chrome浏览器没有捕获该错误。尽管您仍然会在控制台中收到错误消息：“拒绝在框架中显示' https://www.google.ca/ '，因为它将'X-Frame-Options'设置为'sameorigin'。” 至少这将捕获错误消息，然后您可以对其进行处理。

 <iframe id="myframe" src="https://google.ca"></iframe>

 <script>
 myframe.onload = function(){
 var that = document.getElementById('myframe');

 try{
    (that.contentWindow||that.contentDocument).location.href;
 }
 catch(err){
    //err:SecurityError: Blocked a frame with origin "http://*********" from accessing a cross-origin frame.
    console.log('err:'+err);
}
}
</script>

Answer 5

我用 解决了它window.length。但通过此解决方案，您可以获取当前错误（X-Frame 或 404）。

iframe.onload = event => {
   const isLoaded = event.target.contentWindow.window.length // 0 or 1
}

微软软件定义网络