Получите загрузку iframe полное событие

Question

Получите загрузку iframe полное событие

Существует ли способ получить, когда содержание iframe полностью загрузилось от родительской страницы?

117

javascript html iframe load dhtml

задан gblazex 1 July 2010 в 12:46

1 ответ

Accepted Answer

</code> элементы имеют для этого событие <strong><code> load </code> </strong>. </h2> <hr /> <p> Как вы слушаете это событие, зависит от вас, но обычно лучший способ: </p> <p><strong> 1) создать ваш iframe программно </strong></p> <p> Он гарантирует, что ваш <code> load </code> слушатель всегда вызывается прикрепив его <em> перед </em>, iframe начнет загрузку. </p> <pre><code><script> var iframe = document.createElement('iframe'); iframe.onload = function() { alert('myframe is loaded'); }; // before setting 'src' iframe.src = '...'; document.body.appendChild(iframe); // add it to wherever you need it in the document </script> </code></pre> <hr /> <p><strong> 2) встроенный javascript </strong> - еще один способ, который можно использовать в разметке HTML. </p> <pre><code><script> function onMyFrameLoad() { alert('myframe is loaded'); }; </script> <iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe> </code></pre> <hr /> <p> 3) Вы также можете прикрепить прослушиватель событий <em> после элемента </em> внутри тега <code> <script> </code>, но имейте в виду, что в этом случае существует небольшая вероятность того, что iframe уже загружен к тому моменту, когда вы добавляете слушателя. Поэтому возможно, что он <em> не будет вызываться </em> (например, если iframe очень быстрый или поступает из кеша). </p> <pre><code><iframe id="myframe" src="..."></iframe> <script> document.getElementById('myframe').onload = function() { alert('myframe is loaded'); }; </script> </code></pre> <hr /> <p> Также см. Мой другой ответ о <a href="https://stackoverflow.com/questions/3870185/javascript-onload-in-html/3870208?noredirect=1#comment57148725_3870208">, какие элементы также могут запускать этот тип события <code> load </code> </a></p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">169</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="24 November 2019 в 02:07 ">24 November 2019 в 02:07 </span> </div> <a class="s-link" href="/questions/241302/poluchite-zagruzku-iframe-polnoe-sobytie#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-911054"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div style="margin-top: 20px;"> Другие вопросы по тегам: <div class="tags" style="display: inline-block; float: none;"> <a href="/questions/tagged/javascript" class="tag" title="javascript" rel="tag">javascript</a> <a href="/questions/tagged/html" class="tag" title="html" rel="tag">html</a> <a href="/questions/tagged/iframe" class="tag" title="iframe" rel="tag">iframe</a> <a href="/questions/tagged/load" class="tag" title="load" rel="tag">load</a> <a href="/questions/tagged/dhtml" class="tag" title="dhtml" rel="tag">dhtml</a> </div> <h3 class="m-t-20">Похожие вопросы:</h3> <div class="related-block"> <ul> <li><div class='votes-answer green'><span class='vote-count'>99</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/131610/skrytye-funkcii-javascript-zakrytyj" title="Скрытые функции JavaScript? [закрытый]">Скрытые функции JavaScript? [закрытый]</a> - 23 May 2017 02:10 </li> <li><div class='votes-answer green'><span class='vote-count'>70</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/82769/chto-takoe-javascript-versija-sleep" title="Что такое JavaScript-версия sleep ()?">Что такое JavaScript-версия sleep ()?</a> - 17 March 2018 18:15 </li> <li><div class='votes-answer green'><span class='vote-count'>61</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/90102/kak-ja-mogu-otformatirovat-chisla-v-vide-stroki-valjuty-v-javascript" title="Как я могу отформатировать числа в виде строки валюты в JavaScript?">Как я могу отформатировать числа в виде строки валюты в JavaScript?</a> - 26 May 2019 04:14 </li> <li><div class='votes-answer green'><span class='vote-count'>55</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/87787/pochemu-by-ne-ispolzovat-tablicy-dlja-razmetki-v-html-zakryto" title="Почему бы не использовать таблицы для разметки в HTML? [закрыто]">Почему бы не использовать таблицы для разметки в HTML? [закрыто]</a> - 6 November 2018 00:07 </li> <li><div class='votes-answer green'><span class='vote-count'>44</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/82794/kakoj-sintaksis-javljaetsja-predpochtitelnym-dlja-opredelenija-perechislenij-v-javascript-zakryto" title="Какой синтаксис является предпочтительным для определения перечислений в JavaScript? [закрыто]">Какой синтаксис является предпочтительным для определения перечислений в JavaScript? [закрыто]</a> - 26 December 2018 06:38 </li> <li><div class='votes-answer green'><span class='vote-count'>40</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/89465/kak-luchshe-vsego-obnaruzhit-mobilnoe-ustrojstvo" title="Как лучше всего обнаружить мобильное устройство?">Как лучше всего обнаружить мобильное устройство?</a> - 24 April 2019 12:27 </li> <li><div class='votes-answer green'><span class='vote-count'>37</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/89384/javascript-ekvivalenten-printf-string-format" title="JavaScript эквивалентен printf / String.Format">JavaScript эквивалентен printf / String.Format</a> - 31 July 2018 20:09 </li> </ul> </div> </div> </div> </div> </div> <aside class="sidebar"> <div class="awrap"> <script async src="https://yastatic.net/pcode-native/loaders/loader.js"></script> <script> (yaads = window.yaads || []).push({ id: "553274-2", render: "#id-553274-2" }); </script> <div id="id-553274-2"></div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-2355906945027976" data-ad-slot="8038370725"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </aside> </div> </div> <footer class="footer"> <div class="wrapper wrapper--sm"> <div class="footer-navs-col"> <div class="footer-nav footer-nav--menu"> <div class="footer-coryright">© 2017 - 2020 Вопросы и ответы по программированию</div> </div> <div class="footer-nav footer-nav--catalog"> </div> </div> <div class="footer-contacts-col"> <div class="soc-widget-col"> </div> </div> <div class="clearfix"></div> </div> </footer> </div> <script type="text/javascript" src="/js/ui/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="/js/ui/external/jquery.cookie.js"></script> <script type="text/javascript" src="/js/versions/menu.ru.u1607887878.js"></script> <script type="text/javascript" src="/js/jquery.fancybox.min.js"></script> <script type="text/javascript" src="/js/slick.min.js"></script> <script type="text/javascript" src="/js/jquery.maskedinput.min.js"></script> <script type="text/javascript" src="/js/versions/scripts.ru.u1607887878.js"></script>  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; var z = null;m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(90030325, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/90030325" style="position:absolute; left:-9999px;" alt="" /></div></noscript>   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123993370-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-123993370-1'); </script> </div> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "Программирование - вопросы и ответы", "alternateName": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "potentialAction": { "@type": "SearchAction", "target": "https://legkovopros.ru/search?search={search_term_string}", "query-input": "required name=search_term_string" } } { "@context": "https://schema.org", "@type": "Organization", "name": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "logo": "https://legkovopros.ru/i/logo.png", "email": "info@legkovopros.ru", "telephone": "" } </script> </body> </html>