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


я использую 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>

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

теперь, если я использую 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 on load event Спасибо!!

6 62

6 ответов:

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

кроме того, google устанавливает в своем заголовке ответа'X-Frame-Options из того же ОРИГИНА.

даже если вы сделали вызов 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 block.It вызовет исключение при попытке получить 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' до '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. это хорошо работает.