복붙노트

[JQUERY] 캐치 오류가 iframe이 SRC는로드에 실패합니다. 오류 : - "프레임에 표시 할 'http://www.google.co.in/'거부 ..."

JQUERY

캐치 오류가 iframe이 SRC는로드에 실패합니다. 오류 : - "프레임에 표시 할 'http://www.google.co.in/'거부 ..."

해결법

  1. 1.당신 때문에 브라우저에서 동일한 기원 정책 설정의 클라이언트 측에서이 작업을 수행 할 수있을 실 거예요. 당신은 그 폭과 높이 등의 기본 속성 이외의 iFrame을에서 많은 정보를 얻을 수있을 실 거예요.

    당신 때문에 브라우저에서 동일한 기원 정책 설정의 클라이언트 측에서이 작업을 수행 할 수있을 실 거예요. 당신은 그 폭과 높이 등의 기본 속성 이외의 iFrame을에서 많은 정보를 얻을 수있을 실 거예요.

    또한, SAMEORIGIN 자사의 응답 헤더에 'X 프레임 - 옵션'에 세트를 구글.

    Google에 아약스 전화를했다하더라도 브라우저가 같은 기원 정책을 시행하기 때문에 응답을 검사 할 수있을 실 거예요.

    그래서, 유일한 옵션은 당신이 당신의 iframe에 사이트를 표시 할 수있는 경우 서버에서 요청이 볼 수 있도록하는 것입니다.

    그래서, 서버에 .. 웹 응용 프로그램은 www.google.com에 요청을 만들 것하고는 X-프레임 - 옵션의 헤더 인수가 있는지에 대한 응답을 검사합니다. 그 다음 존재한다면 당신은 IFrame을이 오류가 발생하지 알고있다.

  2. 2.난 당신이 iframe이의로드 이벤트를 결합 할 수 있다고 생각, 이벤트가 발생이 iframe이 콘텐츠는 완전히로드 될 때.

    난 당신이 iframe이의로드 이벤트를 결합 할 수 있다고 생각, 이벤트가 발생이 iframe이 콘텐츠는 완전히로드 될 때.

    iframe이 타임 아웃 대안으로 제한 시간 불을하게 명확한로드되면 동시에 당신은의 setTimeout을 시작할 수 있습니다.

    암호:

    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/

  3. 3.당신이 contentDocument를 얻으려고 할 때 온로드는 항상 트리거 될 것입니다, 나는 예외가 발생합니다이 문제를 사용 시도 캐치 block.It를 해결한다.

    당신이 contentDocument를 얻으려고 할 때 온로드는 항상 트리거 될 것입니다, 나는 예외가 발생합니다이 문제를 사용 시도 캐치 block.It를 해결한다.

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

  4. 4.이 이덴의 대답에 약간의 수정입니다 - 나를 위해 크롬에서 오류를 잡을하지 않았다. 당신은 여전히 ​​콘솔에서 오류가 발생합니다 있지만 : "프레임의 디스플레이 'https://www.google.ca/'에 거부는 'X-프레임 - 옵션' 'SAMEORIGIN'로 설정 때문입니다." 적어도이 오류 메시지를 잡을 것입니다 그리고 당신은 그것을 처리 할 수 ​​있습니다.

    이 이덴의 대답에 약간의 수정입니다 - 나를 위해 크롬에서 오류를 잡을하지 않았다. 당신은 여전히 ​​콘솔에서 오류가 발생합니다 있지만 : "프레임의 디스플레이 '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>

  5. 5.나는 비슷한 문제에 직면했다. 난 내가 $ 간격과 $ 제한 시간을 사용하므로 프로젝트 handler.I는 AngularJS와 작업 한 온로드 사용하지 않고 그것을 해결. U도에서는 setTimeout을 사용할 수 있으며 setInterval.Here 코드입니다 :

    나는 비슷한 문제에 직면했다. 난 내가 $ 간격과 $ 제한 시간을 사용하므로 프로젝트 handler.I는 AngularJS와 작업 한 온로드 사용하지 않고 그것을 해결. U도에서는 setTimeout을 사용할 수 있으며 setInterval.Here 코드입니다 :

     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이 문서의 머리를 계속 확인. 내가 뭔가를해야만이 present.Loading는 CORS 오류 쇼 빈 페이지로 CORS가 중지되지 않았습니다입니다. 아무것도 5 초 후가없는 경우 일부 오류 (CORS 정책) 등이 있었다 .. 적절한 message.Thanks을 표시합니다. 나는 그것이 문제가 해결되기를 바랍니다.

  6. 6.나는이 같은 문제가, 크롬 때 iframe이 SRC 부하 오류의 OnError 해고 할 수 없다.

    나는이 같은 문제가, 크롬 때 iframe이 SRC 부하 오류의 OnError 해고 할 수 없다.

    하지만 내 경우에는, 난 그냥, 크로스 도메인 http 요청을 할 필요가 그래서 나는 SRC / 온로드 /의 OnError 대신 iframe 대응의 스크립트를 사용합니다. 그것은 잘 작동합니다.

  7. 7.나는 window.length 그것을 해결했다. 하지만이 솔루션을 사용하면 현재의 에러 (X-프레임 또는 404)를 취할 수 있습니다.

    나는 window.length 그것을 해결했다. 하지만이 솔루션을 사용하면 현재의 에러 (X-프레임 또는 404)를 취할 수 있습니다.

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

    MSDN

  8. 8.허용 대답, https://stackoverflow.com/a/18665488/4038790에서 설명하고있는 바와 같이, 당신은 서버를 통해 확인해야합니다.

    허용 대답, https://stackoverflow.com/a/18665488/4038790에서 설명하고있는 바와 같이, 당신은 서버를 통해 확인해야합니다.

    브라우저에서이를 확인 할 신뢰할 수있는 방법이 없기 때문에, 나는 당신이 자신에게 어떤 URL을 iframe을 통해로드 할 수 있는지 확인하는 데 사용할 수있는 빠른 서버 엔드 포인트를 구축 좋습니다. 서버가 실행되면, 단지 URL로 (또는 어떤 서버 욕망) 쿼리 문자열에 URL을 제공하여 어떤 URL을 확인하는 데에 AJAX 요청을 보냅니다. 여기 NodeJs에서 서버 코드는 다음과 같습니다

    CONST =이 ( '표현')이 필요 표현 CONST 응용 프로그램 =) (표현 app.get ( '/ checkCanLoadIframeUrl'(REQ, 해상도) => { CONST 요청은 = ( '요청')을 필요 CONST는 Q = ( 'Q')을 필요 반환 Q.Promise ((해결) => { const를 URL = decodeURIComponent (req.query.url) CONST deafultTimeout의 setTimeout = (() => { 10 초 후에 // false로 기본 경우 아무런 응답이 없습니다 해결 (거짓) } 10000) 의뢰({ URL, 항아리 : 사실은 / ** 리디렉션을 통해 쿠키를 유지 * / }) CSTE 연구진 ( '응답'(remoteRes) => { CONST OPTS = (remoteRes.headers [ 'X-프레임 옵션'] || ') .toLowerCase ()를 해결 (! OPTS || (OPTS! == & & OPTS을 '거부'! == 'SAMEORIGIN을')) 사항 clearTimeout (deafultTimeout) }) CSTE 연구진 ( '오류', 함수 () { 해결 (거짓) 사항 clearTimeout (deafultTimeout) }) }). 다음 ((결과) => { 리턴 res.status (200) .json (! 결과) }) }) app.listen (process.env.PORT || 3100)

    9. from https://stackoverflow.com/questions/15273042/catch-error-if-iframe-src-fails-to-load-error-refused-to-display-http-ww by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] JQuery와 이벤트 처리기 - "최고"방법은 무엇  (0) 2020.10.18
[JQUERY] JS 또는 쿼리를 통해 강제로 다운로드  (0) 2020.10.18
[JQUERY] 무엇 AJAX이며 어떻게 작동합니까? [복제]  (0) 2020.10.18
[JQUERY] 어떻게 텍스트 영역에서 텍스트를 선택하세요? [복제]  (0) 2020.10.18
[JQUERY] 트리거) (완료 비동기 아약스에 입력 = 파일을 클릭  (0) 2020.10.18
,

티스토리툴바