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

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

수락 된 답변에서 설명했듯이 https://stackoverflow.com/a/18665488/4038790 서버를 통해 확인해야합니다.

브라우저에서이를 확인할 수있는 신뢰할 수있는 방법이 없기 때문에 iframe을 통해 URL을로드 할 수 있는지 확인하는 데 사용할 수있는 빠른 서버 엔드 포인트를 직접 구축하는 것이 좋습니다. 서버가 가동되고 실행되면 AJAX 요청을 보내어 쿼리 문자열에 URL을 제공하여 URL을 확인하십시오 url(또는 서버가 원하는대로). 다음은 NodeJ의 서버 코드입니다.

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)