iframe이 jQuery에서로드를 마쳤을 때 이벤트를 발생시키는 방법은 무엇입니까?

페이지 내에서 PDF를로드해야합니다.

이상적으로는 PDF가로드되면 대체되는 로딩 애니메이션 gif를 갖고 싶습니다.

나는 그것을 할 수 없다고 확신합니다.

PDF 이외의 거의 모든 것, 심지어 Flash도 작동합니다. (Safari, Firefox 3, IE 7에서 테스트 됨)

안 됐네요.

시도해 보셨습니까?

$("#iFrameId").on("load", function () {
    // do something once the iframe is loaded
});

이것은 나를 위해 해냈습니다 (pdf가 아니라 또 다른 " onload저항"내용).

<iframe id="frameid" src="page.aspx"></iframe>
<script language="javascript">
    iframe = document.getElementById("frameid");

    WaitForIFrame();

    function WaitForIFrame() {
        if (iframe.readyState != "complete") {
            setTimeout("WaitForIFrame();", 200);
        } else {
            done();
        }
    }

    function done() {
        //some code after iframe has been loaded
    }
</script>  

도움이 되었기를 바랍니다.

나는 이것을 시도하고 있고 나를 위해 일하는 것 같습니다 : http://jsfiddle.net/aamir/BXe8C/

더 큰 pdf 파일 : http://jsfiddle.net/aamir/BXe8C/1/

$("#iFrameId").ready(function (){
    // do something once the iframe is loaded
});

대신 .ready를 시도 했습니까?

나는 이것에 대한 즉각적인 접근 방식을 시도했지만 PDF 콘텐츠에 대해서는 테스트하지 않았지만 일반 HTML 기반 콘텐츠에 대해서는 작동했습니다. 방법은 다음과 같습니다.

1 단계 : Iframe을 div 래퍼로 래핑

2 단계 : div 래퍼에 배경 이미지를 추가합니다.

.wrapperdiv{
  background-image:url(img/loading.gif);
  background-repeat:no-repeat;
  background-position:center center; /*Can place your loader where ever you like */
}

3 단계 : iframe 태그 추가 ALLOWTRANSPARENCY="false"

아이디어는 iframe이로드 된 후 iframe이로드 애니메이션을 덮을 때까지 래퍼 div에로드 애니메이션을 표시하는 것입니다.

시도 해봐.

jquery Load와 Ready를 모두 사용하면 iframe이 진정으로 준비되었을 때 실제로 일치하지 않는 것 같습니다.

나는 이런 식으로 결국

$('#iframe').ready(function () {
    $("#loader").fadeOut(2500, function (sender) {
        $(sender).remove();
    });
});

#loader는 스피너 gif가있는 iframe 위에 절대적으로 배치 된 div입니다.

@Alex aw 그거 부끄럽다. 다음 iframe과 같은 html 문서가 있다면 어떨까요?

<html>
  <head>
    <meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
  </head>
  <body>
  </body>
</html>

확실히 해킹이지만 Firefox에서는 작동 할 수 있습니다. 이 경우 load 이벤트가 너무 빨리 시작되는지 궁금합니다.

iFrame의 pdf가로드되는 동안 로더를 표시해야 했으므로 다음과 같은 결과를 얻었습니다.

    loader({href:'loader.gif', onComplete: function(){
            $('#pd').html('<iframe onLoad="loader.close();" src="pdf" width="720px" height="600px" >Please wait... your report is loading..</iframe>');
    }
    });

로더를 보여주고 있습니다. 고객이 내 로더를 볼 수 있다고 확신하면 iframe을로드하는 onCompllet 로더 메서드를 호출합니다. Iframe에는 "onLoad"이벤트가 있습니다. PDF가로드되면 로더를 숨기고있는 onloat 이벤트가 트리거됩니다. :)

중요한 부분 :

iFrame에는 필요한 작업을 수행 할 수있는 "onLoad"이벤트가 있습니다 (로더 숨기기 등).

모든 작업에 대해 수행하는 작업은 다음과 같습니다. Firefox, IE, Opera 및 Safari에서 작동합니다.

<script type="text/javascript">
  $(document).ready(function(){
    doMethod();
  });
  function actionIframe(iframe)
  {
    ... do what ever ...
  }
  function doMethod()
  {   
    var iFrames = document.getElementsByTagName('iframe');

    // what ever action you want.
    function iAction()
    {
      // Iterate through all iframes in the page.
      for (var i = 0, j = iFrames.length; i < j; i++)
      {
        actionIframe(iFrames[i]);
      }
    }

    // Check if browser is Safari or Opera.
    if ($.browser.safari || $.browser.opera)
    {
      // Start timer when loaded.
      $('iframe').load(function()
      {
        setTimeout(iAction, 0);
      }
      );

      // Safari and Opera need something to force a load.
      for (var i = 0, j = iFrames.length; i < j; i++)
      {
         var iSource = iFrames[i].src;
         iFrames[i].src = '';
         iFrames[i].src = iSource;
      }
    }
    else
    {
      // For other good browsers.
      $('iframe').load(function()
      {
        actionIframe(this);
      }
      );
    }
  }
</script>

다운로드가 완료된 후 브라우저의 열기 / 저장 인터페이스가 사용자에게 팝업 될 것으로 예상 할 수 있다면 다운로드를 시작할 때 다음을 실행할 수 있습니다.

$( document ).blur( function () {
    // Your code here...
});

페이지 상단에 대화 상자가 나타나면 흐림 이벤트가 트리거됩니다.

pdf 파일이로드 된 후 iframe 문서에 새 DOM 요소 <embed/>가 있으므로 다음과 같이 확인할 수 있습니다.

    window.onload = function () {


    //creating an iframe element
    var ifr = document.createElement('iframe');
    document.body.appendChild(ifr);

    // making the iframe fill the viewport
    ifr.width  = '100%';
    ifr.height = window.innerHeight;

    // continuously checking to see if the pdf file has been loaded
     self.interval = setInterval(function () {
        if (ifr && ifr.contentDocument && ifr.contentDocument.readyState === 'complete' && ifr.contentDocument.embeds && ifr.contentDocument.embeds.length > 0) {
            clearInterval(self.interval);

            console.log("loaded");
            //You can do print here: ifr.contentWindow.print();
        }
    }, 100); 

    ifr.src = src;
}

이 상황에 적용한 솔루션은 DOM에 절대 로딩 이미지를 배치하는 것입니다.이 이미지는 iframe이로드 된 후 iframe 레이어에 포함됩니다.

iframe의 Z- 색인은 (로드 중 Z- 색인 + 1) 이상이어야합니다.

예를 들면 :

.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }

자바 스크립트 솔루션이 없다면 도움이되기를 바랍니다. CSS가 이러한 상황에 가장 적합하다고 생각합니다.

친애하는.