Knockout.js
iframe 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에서 오류가 발생한다는 것을 알 수 있습니다.
답변
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>
답변
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
}