Поймать ошибку, если iframe src не загружается. Ошибка: - " отказано в отображении "http://www.google.co.in-в рамке.."

я использую Knockout.js для привязки тег iframe src tag (это будет настраиваться по отношению к пользователю).

теперь, если пользователь настроил 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>

то, что я хочу, если url-адрес не загружается. Я хочу показать Таможни. Screenshot of console when I get error СКРИПКА ЗДЕСЬ

теперь, если я использую onload и onerror как: -

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

он работает отлично загрузка w3schools.com но не с google.com.

Secondly: - если я сделаю это как функцию и попробую, как я сделал в моей скрипке, это не работает.

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

Я не знаю, как я должен заставить его работать и захватить ошибку.

отредактировано: - я видел хотите вызвать функцию, если iframe не загружается или load's вопрос в stackoverflow, но он показывает ошибку для сайтов, которые могут быть загружены в iframe.

кроме того, я заглянул в iframe Stackoverflow при событии загрузки Спасибо!!

6 ответов


вы не сможете сделать этого со стороны клиента из-за Та Же Политика Происхождения установленных браузерах. Вы не сможете получить много информации из кадра, помимо основных свойств, таких как ширина и высота.

кроме того, google устанавливает в своем заголовке ответа"X-Frame-Options ' of SAMEORIGIN.

даже если вы сделали вызов ajax в google, вы не сможете проверить ответ, потому что браузер применяет тот же источник Политика.

Итак, единственный вариант-сделать запрос с вашего сервера, чтобы увидеть, можете ли вы отобразить сайт в своем IFrame.

Так, на вашем сервере.. ваше веб-приложение сделает запрос на www.google.com а затем проверьте ответ, чтобы увидеть, имеет ли он аргумент заголовка X-Frame-Options. Если он существует, то вы знаете, что IFrame будет ошибкой.


Я думаю, что вы можете связать load событие iframe, событие срабатывает при полной загрузке содержимого 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 в inline вызов функции; попробуйте изменить это:

<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/


onload всегда будет триггером, я slove эта проблема использует блок try catch.Он выдаст исключение при попытке получить contentDocument.

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

я столкнулся с аналогичной проблемой. Я решил это без использования обработчика onload.Я работал над проектом AngularJs, поэтому использовал $interval и $ timeout. U также можно использовать setTimeout и setInterval.Вот код:

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

каждые 0,4 секунды продолжайте проверять голову документа iFrame. Я что-то присутствую.Загрузка не была остановлена CORS, так как ошибка CORS показывает пустую страницу. Если после 5 секунд ничего нет, произошла ошибка (политика Cors) и т. д.. Шоу подходит сообщение.Спасибо. Надеюсь, это решит твою проблему.


Это небольшая модификация ответа 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>

У меня такая же проблема, chrome не может запустить onerror при ошибке загрузки iframe src.

но в моем случае, Мне просто нужно сделать междоменный http-запрос, поэтому я использую скрипт src/onload / onerror вместо iframe. он хорошо работает.