Поймать ошибку, если 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-адрес не загружается. Я хочу показать Таможни. СКРИПКА ЗДЕСЬ
теперь, если я использую 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>
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. он хорошо работает.