当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Catch error if iframe src fails to load . Error :-"Refused to display 'http://www.google.co.in/' in a frame.."

问题描述:

I am using Knockout.js to bind iframe src tag(This will be configurable with respect to User).

Now, if user has configured http://www.google.com (i know it won't load in iframe, thats why i am using it for -ve scenario) and that has to be shown in IFrame.

but it throws error:-

Refused to display 'http://www.google.co.in/' in a frame because it

set 'X-Frame-Options' to 'SAMEORIGIN'.

I have the following code for Iframe:-

<iframe class="iframe" id="iframe" data-bind="attr: {src: externalAppUrl, height: iframeheight}">

<p>Hi, This website does not supports IFrame</p>

</iframe>

What i want is, if the url fails to load. I want to display Custom Message.

FIDDLE HERE

Now, if i use onload and onerror as:-

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

It works fine loading w3schools.com but not with google.com.

Secondly:- if i make it as a function and try like i have done in my fiddle, it doesn't works.

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

I don't know how should i make it run and capture the error.

Edited:- I have seen Want to call a function if iframe doesn't load or load's question in stackoverflow but it shows error for sites that can be loaded in iframe.

Also, i have looked into Stackoverflow iframe on load event

Thanks!!

网友答案:

I think that you can bind the load event of the iframe, the event fires when the iframe content is fully loaded.

At the same time you can start a setTimeout, if the iFrame is loaded clear the timeout alternatively let the timeout fire.

Code:

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

});

Demo: http://jsfiddle.net/IrvinDominin/QXc6P/

Second problem

It is because you miss the parens in the inline function call; try change this:

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

into this:

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

Demo: http://jsfiddle.net/IrvinDominin/ALBXR/4/

网友答案:

You wont be able to do this from the client side because of the Same Origin Policy set by the browsers. You wont be able to get much information from the iFrame other than basic properties like its width and height.

Also, google sets in its response header an 'X-Frame-Options' of SAMEORIGIN.

Even if you did an ajax call to google you wont be able to inspect the response because the browser enforcing Same Origin Policy.

So, the only option is to make the request from your server to see if you can display the site in your IFrame.

So, on your server.. your web app would make a request to www.google.com and then inspect the response to see if it has a header argument of X-Frame-Options. If it does exist then you know the IFrame will error.

网友答案:

I faced similar problem. I solved it without using onload handler.I was working on AngularJs project so i used $interval and $ timeout. U can also use setTimeout and setInterval.Here's the code:

 var stopPolling;
 var doIframePolling;
 $scope.showIframe = true;
 doIframePolling = $interval(function () {
    if(document.getElementById('UrlIframe') && document.getElementById('UrlIframe').contentDocument.head && document.getElementById('UrlIframe').contentDocument.head.innerHTML != ''){
        $interval.cancel(doIframePolling);
        doIframePolling = undefined;
        $timeout.cancel(stopPolling);
        stopPolling = undefined;
        $scope.showIframe = true;
    }
},400);

stopPolling = $timeout(function () {
        $interval.cancel(doIframePolling);
        doIframePolling = undefined;
        $timeout.cancel(stopPolling);
        stopPolling = undefined;
        $scope.showIframe = false;     
},5000);

 $scope.$on("$destroy",function() {
        $timeout.cancel(stopPolling);
        $interval.cancel(doIframePolling);
 });

Every 0.4 Seconds keep checking the head of iFrame Document. I somthing is present.Loading was not stopped by CORS as CORS error shows blank page. If nothing is present after 5 seconds there was some error (Cors policy) etc.. Show suitable message.Thanks. I hope it solves your problem.

分享给朋友:
您可能感兴趣的文章:
随机阅读: