[jquery] iframe src가로드에 실패하면 오류를 포착합니다. 오류 :-“프레임에 ‘http://www.google.co.in/’표시를 거부했습니다 ..”

Program / 글쓴이

Knockout.jsiframe src태그 를 바인딩 하는 데 사용 하고 있습니다 (사용자와 관련하여 구성 할 수 있음).

이제 사용자가 http://www.google.com 을 구성한 경우 (iframe에서로드되지 않는다는 것을 알고 있으므로 -ve 시나리오에 사용하고 있습니다) IFrame에 표시되어야합니다. 하지만 오류가 발생합니다.

‘X-Frame-Options’를 ‘SAMEORIGIN’으로 설정했기 때문에 프레임에 ‘ http://www.google.co.in/ ‘ 을 표시하는 것을 거부했습니다 .

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은 응답 헤더 에 SAMEORIGIN 의 ‘ X-Frame-Options ‘를 설정합니다.

Google에 ajax 호출을하더라도 브라우저가 동일한 출처 정책을 시행하기 때문에 응답을 검사 할 수 없습니다.

따라서 유일한 옵션은 IFrame에 사이트를 표시 할 수 있는지 확인하기 위해 서버에서 요청하는 것입니다.

따라서 서버에서 웹 앱은 www.google.com에 요청한 다음 응답을 검사하여 X-Frame-Options의 헤더 인수가 있는지 확인합니다. 존재하는 경우 IFrame에서 오류가 발생한다는 것을 알 수 있습니다.

답변

loadiframe 의 이벤트를 바인딩 할 수 있다고 생각합니다 . 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/

답변

onload는 항상 트리거되며,이 문제는 try catch 블록을 사용하여 해결합니다. contentDocument를 가져 오려고 할 때 예외가 발생합니다.

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

답변

이것은 Edens 답변에 대한 약간의 수정입니다-크롬에서 나를 위해 오류를 포착하지 못했습니다. 콘솔에 여전히 오류가 표시되지만 ” ‘X-Frame-Options’를 ‘sameorigin’으로 설정했기 때문에 프레임에 ‘ https://www.google.ca/ ‘ 를 표시하는 것을 거부했습니다 .” 적어도 이것은 오류 메시지를 포착하고 처리 할 수 ​​있습니다.

 <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 문서의 헤드를 계속 확인합니다. I somthing is present. CORS 오류가 빈 페이지를 표시하므로 CORS에 의해로드가 중지되지 않았습니다. 5 초 후에도 아무것도 없으면 오류 (Cors 정책) 등이 있습니다. 적절한 메시지를 표시합니다. 감사합니다. 문제가 해결되기를 바랍니다.

답변

나는 같은 문제가 있는데, iframe src로드 오류가 발생하면 크롬이 onerror를 실행할 수 없습니다.

하지만 제 경우에는 도메인 간 http 요청 만하면되므로 iframe 대신 src / onload / onerror 스크립트를 사용합니다. 잘 작동하고 있습니다.

답변

나는 그것을 window.length. 그러나이 솔루션을 사용하면 현재 오류 (X-Frame 또는 404)를 사용할 수 있습니다.

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

MSDN