[Javascript] 동적으로 삽입 된 iframe에 jQuery .ready가 있습니다.
jQuery 1.3.2를 사용하면 다음과 같은 효과를 얻을 수 있습니다.
$('iframe').ready(function() {
$('body', $('iframe').contents()).html('Hello World!');
});
개정:! 실제로 위의 코드는 Firefox에서 작동하는 것처럼 보이지만 Opera에서 작동하는 것처럼 보이지 않습니다.
대신 내 목적을 위해 폴링 솔루션을 구현했습니다. 다음과 같이 간소화되었습니다.
$(function() {
function manipIframe() {
el = $('body', $('iframe').contents());
if (el.length != 1) {
setTimeout(manipIframe, 100);
return;
}
el.html('Hello World!');
}
manipIframe();
});
이렇게하면 호출 된 iframe 페이지에 코드가 필요하지 않습니다. 모든 코드는 상위 프레임 / 창에서 상주하며 실행됩니다.
우리는 누군가가 그림을 클릭 할 때 iframe을 동적으로 표시하기 위해 jQuery thickbox 를 사용하고 있습니다. 이 iframe에서는 여러 그림을 표시하기 위해 galleria 라는 자바 스크립트 라이브러리를 사용하고 있습니다.
문제는 iframe의 $(document).ready 가 너무 빨리 실행되는 것으로 보이고 iframe 내용도 아직로드되지 않았기 때문에 galleria 코드가 DOM 요소에 올바르게 적용되지 않는 것 같습니다. $(document).ready 는 iframe 상위 준비 상태를 사용하여 iframe의 준비 여부를 결정하는 것으로 보입니다.
document 함수에 의해 호출 된 함수를 별도의 함수로 추출하고 100ms의 시간 초과 후 호출하면. 작동하지만 느린 컴퓨터로 제작할 수는 없습니다.
$(document).ready(function() { setTimeout(ApplyGalleria, 100); });
내 질문 : 역동적 인 iframe이 준비되었을 때 코드를 실행할 수 있도록 jQuery 이벤트를 바인딩해야하며 부모 클래스가 아닌 것이 좋습니다.
이 시도,
<iframe id="testframe" src="about:blank" onload="if (testframe.location.href != 'about:blank') testframe_loaded()"></iframe>
JavaScript 함수 testframe_loaded ()를 작성하면됩니다.
DrJokepu와 David Murdoch 아이디어에 이어 더 완벽한 버전을 구현했습니다. 부모와 iframe 및 iframe에서 jQuery를 컨트롤해야합니다.
iframe 코드 :
var iframe = window.frameElement;
if (iframe){
iframe.contentDocument = document;//normalization: some browsers don't set the contentDocument, only the contentWindow
var parent = window.parent;
$(parent.document).ready(function(){//wait for parent to make sure it has jQuery ready
var parent$ = parent.jQuery;
parent$(iframe).trigger("iframeloading");
$(function(){
parent$(iframe).trigger("iframeready");
});
$(window).load(function(){//kind of unnecessary, but here for completion
parent$(iframe).trigger("iframeloaded");
});
$(window).unload(function(e){//not possible to prevent default
parent$(iframe).trigger("iframeunloaded");
});
$(window).on("beforeunload",function(){
parent$(iframe).trigger("iframebeforeunload");
});
});
}
상위 테스트 코드 :
$(function(){
$("iframe").on("iframeloading iframeready iframeloaded iframebeforeunload iframeunloaded", function(e){
console.log(e.type);
});
});
기본적으로 다른 사람들이 이미 게시했지만 IMHO는 조금 더 깨끗합니다.
$('<iframe/>', {
src: 'https://example.com/',
load: function() {
alert("loaded")
}
}).appendTo('body');
javascript 
jquery