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|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|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|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|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|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|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|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|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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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