97

ページ内にPDFをロードする必要があります。

理想的には、PDFが読み込まれると置き換えられる読み込みアニメーションGIFが欲しいです。

4

14 に答える 14

215

やってみました：

$("#iFrameId").on("load", function () {
    // do something once the iframe is loaded
});
于 2008-08-27T12:55:50.667 に答える
38

私はそれができないと確信しています。

Flash でさえも、PDF 以外のほとんどすべてが機能します。(Safari、Firefox 3、IE 7 でテスト済み)

残念な。

于 2008-08-28T17:38:18.357 に答える
7

私はこれを試していますが、私のために働いているようです: http://jsfiddle.net/aamir/BXe8C/

より大きな pdf ファイル: http://jsfiddle.net/aamir/BXe8C/1/

于 2012-07-24T15:27:28.897 に答える
7

これは私のためにそれをしました（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>

お役に立てれば。

于 2009-08-28T03:23:37.987 に答える
6 
$("#iFrameId").ready(function (){
    // do something once the iframe is loaded
});

代わりに .ready を試しましたか?

于 2009-06-01T07:51:25.530 に答える
5

私はこれに対して独創的なアプローチを試みました.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 : ur iframe タグに追加 ALLOWTRANSPARENCY="false"

アイデアは、iframe がロードされた後に iframe がロードされるまで、ラッパー div にロード アニメーションを表示することです。

試してみる。

于 2011-12-14T05:34:32.873 に答える
4

jquery Load と Ready の両方を使用すると、iframe が本当に準備が整ったときに実際に一致するようには見えませんでした。

私は最終的にこのようなことをしました

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

#loader は、スピナー gif を含む iframe の上に絶対配置された div です。

于 2011-05-26T16:42:43.850 に答える
2

@アレックスああ、それは残念です。iframe次のような html ドキュメントがあったとします。

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

間違いなくハックですが、Firefox ではうまくいくかもしれません。その場合、ロードイベントがすぐに発生するのではないかと思いますが。

于 2008-08-28T05:06:20.397 に答える
1

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」イベントがあり、必要なことを実行できます（ローダーを非表示にするなど）。

于 2013-03-21T03:02:48.957 に答える
0

これは、あらゆるアクションに対して私が行っていることであり、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>
于 2008-11-19T14:00:00.110 に答える
0

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;
}
于 2016-04-07T07:03:07.893 に答える
0

この状況に私が適用した解決策は、iframe がロードされた後に iframe レイヤーによってカバーされる絶対ロード画像を DOM に配置することです。

iframe の z-index は、(読み込みの z-index + 1) またはそれ以上である必要があります。

例えば：

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

JavaScript ソリューションが役に立たなかった場合、これが役立つことを願っています。これらの状況では、CSS がベスト プラクティスだと思います。

よろしくお願いします。

于 2016-06-22T10:46:58.180 に答える