Javascript：页面加载后添加 iframe 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3069915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: add iframe element after page has loaded
提问by EddyR
Using Javascript I need to find the best way to add a iframe element that is:
使用 Javascript 我需要找到添加 iframe 元素的最佳方法，即：
- Completely hidden from the user.
- Created after the page has fully loaded. i.e. Should be completely unobtrusive to the user and not affect loading of images and other scripts etc, in any way.
- 对用户完全隐藏。
- 在页面完全加载后创建。即对用户来说应该是完全不显眼的，并且不会以任何方式影响图像和其他脚本等的加载。
回答by T.J. Crowder
You can add a hidden iframelike this:
您可以iframe像这样添加隐藏：
var iframe = document.createElement('iframe');
iframe.style.display = "none";
iframe.src = /* your URL here */;
document.body.appendChild(iframe);
If you need to do that on page load, you can simply put the relevant code in a script tag at the end of your document, or hook it up via windowloadevent (window.onload = yourFunction;), although the windowloadevent happens quite late in the page load process. And of course, like many things involving JavaScript on browsers, you may find your life is a bit easier if you use a library like Prototype, jQuery, Closure, or any of several others, as these can smooth out browser differences. (That said, the above code will work on any browser I'm familiar with.) Libraries will typically offer a way of doing things as soon as the page is loaded, but earlier than windowloadtypically happens. jQuery provides the readyfunction; Prototype provides the dom:loadedevent; etc.
如果您需要在页面加载时执行此操作，您可以简单地将相关代码放在文档末尾的脚本标记中，或者通过windowload事件 ( window.onload = yourFunction;) 将其连接起来，尽管该windowload事件发生在页面加载过程的后期。当然，就像浏览器上涉及 JavaScript 的许多事情一样，如果您使用像Prototype、jQuery、Closure或其他几个库这样的库，您可能会发现生活会轻松一些，因为这些可以消除浏览器差异。（也就是说，上面的代码可以在我熟悉的任何浏览器上运行。）库通常会在页面加载后立即提供一种处理方式，但比windowload通常发生的要早。jQuery 提供了ready功能; Prototype 提供dom:loaded事件；等等。
For instance, if you put this at the end of your bodytag, it will create the iframe after everythingelse has loaded (including all images, windowloaddoesn't fire until all images have loaded):
例如，如果你把它放在你的body标签的末尾，它会在其他所有东西都加载后创建 iframe （包括所有图像，windowload在所有图像加载之前不会触发）：
<script type='text/javascript'>
window.onload = function() {
var iframe = document.createElement('iframe');
iframe.style.display = "none";
iframe.src = /* your URL here */;
document.body.appendChild(iframe);
};
</script>
回答by Nices W?lkchen
If you like to load multiple iFrames after your page has loaded you can also combine it with a setTimeout(), .ready()and .each()function:
如果您想在页面加载后加载多个 iFrame，您还可以将其与setTimeout(),.ready()和.each()函数结合使用：
Markup:
标记：
<span class="hidden iframe-holder" data-iframe="https://open.spotify.com/embed/track/6Js1lHzz7gu7XTyvcdLuPa"></span>
<iframe src=""></iframe>
<span class="hidden iframe-holder" data-iframe="https://open.spotify.com/embed/track/4icHXsDdv3eHfa7g3WQWAP"></span>
<iframe src=""></iframe>
<span class="hidden iframe-holder" data-iframe="https://open.spotify.com/embed/track/3BukJHUieqwat6hwALC23w"></span>
<iframe src=""></iframe>
<span class="hidden iframe-holder" data-iframe="https://open.spotify.com/embed/track/1Pkj7fCqzg4o6ivPuWU0vB"></span>
<iframe src=""></iframe>
JS (in this case jQuery - sorry I'm from the WordPress cosmos):
JS（在这种情况下是 jQuery - 对不起，我来自 WordPress 宇宙）：
jQuery(document).ready(function( $ ) {
setTimeout(function(){
$(".iframe-holder").each(function(){
var iframesrces = $(this).attr('data-iframe');
var nextiFrame = $(this).next();
$(nextiFrame).attr('src',iframesrces);
});
}, 1000);
});
This solution is useful if you get your strings dynamically from a database. Just make sure that you place the iframe source holder span "before" your iframe in the DOM and it will attach its data-iframeattribute to the iFrame element after your page has been loaded.
如果您从数据库动态获取字符串，则此解决方案很有用。只需确保将 iframe 源持有者跨度放置在 DOM 中 iframe 的“之前”，它就会data-iframe在您的页面加载后将其属性附加到 iFrame 元素。
