blocks|key|1778079|text|我很确定这是不可能做到的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1778080|除了PDF之外，几乎任何其他东西都可以工作，甚至Flash也不行。(在Safari、Firefox+3、IE+7上测试)|1778081|太可惜了。|1778082|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>I'm pretty certain that it cannot be done.</p>

<p>Pretty much anything else than PDF works, even Flash. (Tested on Safari, Firefox 3, IE 7)</p>

<p>Too bad.</p>


blocks|key|1562828|text|您是否尝试过：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1562829|$("#iFrameId").on("load",+function+()+{
++++//+do+something+once+the+iframe+is+loaded
});|code-block|syntax|javascript|1562830|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Have you tried:</p>

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


blocks|key|1563004|text|这为我做到了(不是pdf，而是另一个“抵抗onload”的内容)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1563005|<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>++|code-block|syntax|javascript|1563006|希望这能有所帮助。|1563007|entityMap^0|L|6|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>This did it for me (not pdf, but another "<code>onload</code> resistant" content): </p>

<pre><code>&lt;iframe id="frameid" src="page.aspx"&gt;&lt;/iframe&gt;
&lt;script language="javascript"&gt;
    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
    }
&lt;/script&gt;  
</code></pre>

<p>Hope this helps.</p>


blocks|key|1778270|text|我正在尝试这个方法，似乎对我很有效：http://jsfiddle.net/aamir/BXe8C/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1778271|更大的pdf文件：http://jsfiddle.net/aamir/BXe8C/1/|1778272|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/aamir/BXe8C/|1|http://jsfiddle.net/aamir/BXe8C/1/^0|I|W|0|0|9|Y|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<p>I am trying this and seems to be working for me:
<a href="http://jsfiddle.net/aamir/BXe8C/" rel="noreferrer">http://jsfiddle.net/aamir/BXe8C/</a></p>

<p>Bigger pdf file:
<a href="http://jsfiddle.net/aamir/BXe8C/1/" rel="noreferrer">http://jsfiddle.net/aamir/BXe8C/1/</a></p>


blocks|key|1562974|text|$("#iFrameId").ready(function+(){
++++//+do+something+once+the+iframe+is+loaded
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1562975|你有没有尝试过.ready呢？|unstyled|1562976|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<p>have you tried .ready instead?</p>


blocks|key|1778235|text|当iframe真正就绪时，同时使用jquery+Load和ready似乎都不匹配。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1778236|我最终做了这样的事情|1778237|$('#iframe').ready(function+()+{
++++$("#loader").fadeOut(2500,+function+(sender)+{
++++++++$(sender).remove();
++++});
});|code-block|syntax|javascript|1778238|其中#loader是一个绝对定位在iframe上的div，带有一个微调gif。|1778239|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Using both jquery Load and Ready neither seemed to really match when the iframe was TRULY ready.</p>

<p>I ended up doing something like this</p>

<pre><code>$('#iframe').ready(function () {
    $("#loader").fadeOut(2500, function (sender) {
        $(sender).remove();
    });
});
</code></pre>

<p>Where #loader is an absolutely positioned div over top the iframe with a spinner gif.</p>


blocks|key|1562877|text|@Alex+aw，这是一个令人沮丧的问题。如果在您的iframe中有一个html文档，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1562878|<html>
++<head>
++++<meta+http-equiv="refresh"+content="0;url=/pdfs/somepdf.pdf"+/>
++</head>
++<body>
++</body>
</html>|code-block|syntax|javascript|1562879|这绝对是一种黑客攻击，但它可能适用于Firefox。虽然我想知道在这种情况下，load事件是否会过早触发。|1562880|entityMap^0|Q|6|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>@Alex aw that's a bummer. What if in your <code>iframe</code> you had an html document that looked like:</p>

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

<p>Definitely a hack, but it might work for Firefox. Although I wonder if the load event would fire too soon in that case.</p>


blocks|key|1778138|text|下面是我对任何动作所做的工作，它在Firefox、IE、Opera和Safari中都有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1778139|<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%2B%2B)
++++++{
++++++++actionIframe(iFrames[i]);
++++++}
++++}

++++//+Check+if+browser+is+Safari+or+Opera.
++++if+($.browser.safari+%7C%7C+$.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%2B%2B)
++++++{
+++++++++var+iSource+=+iFrames[i].src;
+++++++++iFrames[i].src+=+'';
+++++++++iFrames[i].src+=+iSource;
++++++}
++++}
++++else
++++{
++++++//+For+other+good+browsers.
++++++$('iframe').load(function()
++++++{
++++++++actionIframe(this);
++++++}
++++++);
++++}
++}
</script>|code-block|syntax|javascript|1778140|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is what I do for any action and it works in Firefox, IE, Opera, and Safari.</p>

<pre><code>&lt;script type="text/javascript"&gt;
  $(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 &lt; 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 &lt; j; i++)
      {
         var iSource = iFrames[i].src;
         iFrames[i].src = '';
         iFrames[i].src = iSource;
      }
    }
    else
    {
      // For other good browsers.
      $('iframe').load(function()
      {
        actionIframe(this);
      }
      );
    }
  }
&lt;/script&gt;
</code></pre>


blocks|key|1778310|text|如果下载完成后，浏览器的打开/保存界面会为用户弹出，那么您可以在开始下载时运行以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1778311|$(+document+).blur(+function+()+{
++++//+Your+code+here...
});|code-block|syntax|javascript|1778312|当对话框在页面顶部弹出时，将触发模糊事件。|1778313|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you can expect the browser's open/save interface to pop up for the user once the download is complete, then you can run this when you start the download:</p>

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

<p>When the dialogue pops up on top of the page, the blur event will trigger.</p>


blocks|key|1778334|text|因为在加载pdf文件后，iframe文档将有一个新的DOM元素<embed/>，所以我们可以像这样进行检查：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1778335|++++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%25';
++++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;
}|code-block|syntax|javascript|1778336|entityMap^0|V|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Since after the pdf file is loaded, the iframe document will have a new DOM element <code>&lt;embed/&gt;</code>, so we can do the check like this:</p>

<pre><code>    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 &amp;&amp; ifr.contentDocument &amp;&amp; ifr.contentDocument.readyState === 'complete' &amp;&amp; ifr.contentDocument.embeds &amp;&amp; ifr.contentDocument.embeds.length &gt; 0) {
            clearInterval(self.interval);

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

    ifr.src = src;
}
</code></pre>


blocks|key|1563187|text|对于这种情况，我的解决方案是简单地在DOM中放置一个绝对加载图像，在加载iframe之后，它将被iframe层覆盖。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1563188|iframe的z索引应该是(加载的z索引%2B+1)，或者更高一点。|1563189|例如：|1563190|.loading-image+{+position:+absolute;+z-index:+0;+}
.iframe-element+{+position:+relative;+z-index:+1;+}|code-block|syntax|javascript|1563191|如果没有javaScript解决方案，我希望这会有所帮助。我确实认为CSS是处理这些情况的最佳实践。|1563192|诚挚的问候。|1563193|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>The solution I have applied to this situation is to simply place an absolute loading image in the DOM, which will be covered by the iframe layer after the iframe is loaded.</p>

<p>The z-index of the iframe should be (loading's z-index + 1), or just higher.</p>

<p>For example:</p>

<pre><code>.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }
</code></pre>

<p>Hope this helps if no javaScript solution did. I do think that CSS is best practice for these situations.</p>

<p>Best regards.</p>


blocks|key|1778393|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1778394|function+frameLoaded(element)+{
++++alert('LOADED');
};|code-block|syntax|javascript|1778395|+<iframe+src="https://google.com"+title="W3Schools+Free+Online+Web+Tutorials"+onload="frameLoaded(this)"></iframe>+|1778396|1778397|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function frameLoaded(element) {
    alert('LOADED');
};</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;iframe src="https://google.com" title="W3Schools Free Online Web Tutorials" onload="frameLoaded(this)"&gt;&lt;/iframe&gt; </code></pre>
</div>
</div>
</p>


<p>I have to load a PDF within a page.</p>

<p>Ideally I would like to have a loading animated gif which is replaced once the PDF has loaded.</p>


How do I fire an event when a iframe has finished loading in jQuery?

我必须加载一个页面内的PDF。理想情况下，我想有一个加载动画gif，这是取代一旦PDF已加载。

问当iframe在jQuery中加载完成后，我如何触发事件？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当iframe在jQuery中加载完成后，我如何触发事件？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当iframe在jQuery中加载完成后，我如何触发事件？
EN