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

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

Теперь, если пользователь настроил 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-адрес не загружался. Я хочу отображать настраиваемое сообщение . FIDDLE ЗДЕСЬ

Теперь, если я использую 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 при загрузке события Спасибо !!

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

Кроме того, Google устанавливает в своем заголовке ответа « X-Frame-Options » 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/

Вторая проблема

Это потому, что вы пропустили скобки в вызове встроенной функции; попробуйте изменить это:

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

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

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

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

Я столкнулся с подобной проблемой. Я решил это без использования обработчика 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) и т. Д. Покажите подходящее сообщение. Спасибо. Надеюсь, это решит вашу проблему.

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

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

Я решил это с помощью window.length. Но с этим решением вы можете взять текущую ошибку (X-Frame или 404).

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

MSDN

Как объяснено в принятом ответе https://stackoverflow.com/a/18665488/4038790 , вам необходимо проверить через сервер.

Поскольку нет надежного способа проверить это в браузере, я предлагаю вам создать себе быструю конечную точку сервера, которую вы можете использовать, чтобы проверить, загружается ли какой-либо URL-адрес через iframe. После того, как ваш сервер будет запущен и заработает, просто отправьте ему запрос AJAX, чтобы проверить любой URL-адрес, указав URL-адрес в строке запроса как url(или как угодно вашему серверу). Вот код сервера в NodeJs:

const express = require('express')
const app = express()

app.get('/checkCanLoadIframeUrl', (req, res) => {
  const request = require('request')
  const Q = require('q')

  return Q.Promise((resolve) => {
    const url = decodeURIComponent(req.query.url)

    const deafultTimeout = setTimeout(() => {
      // Default to false if no response after 10 seconds
      resolve(false)
    }, 10000)

    request({
        url,
        jar: true /** Maintain cookies through redirects */
      })
      .on('response', (remoteRes) => {
        const opts = (remoteRes.headers['x-frame-options'] || '').toLowerCase()
        resolve(!opts || (opts !== 'deny' && opts !== 'sameorigin'))
        clearTimeout(deafultTimeout)
      })
      .on('error', function() {
        resolve(false)
        clearTimeout(deafultTimeout)
      })
  }).then((result) => {
    return res.status(200).json(!!result)
  })
})

app.listen(process.env.PORT || 3100)