[Javascript] 동적으로 삽입 된 iframe에 jQuery .ready가 있습니다.


Answers

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 페이지에 코드가 필요하지 않습니다. 모든 코드는 상위 프레임 / 창에서 상주하며 실행됩니다.

Question

우리는 누군가가 그림을 클릭 할 때 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');