Javascript：在页面加载后添加iframe元素

Question

使用Javascript我需要找到添加iframe元素的最佳方法：

1. 完全隐藏在用户之外。
2. 页面完全加载后创建。 ie应该对用户完全不显眼，并且不以任何方式影响图像和其他脚本等的加载。

Answer 1

您可以像这样添加隐藏的iframe ：

var iframe = document.createElement('iframe');
iframe.style.display = "none";
iframe.src = /* your URL here */;
document.body.appendChild(iframe);

如果您需要在页面加载时执行此操作，您只需将相关代码放在文档末尾的脚本标记中，或通过window load事件（ window.onload = yourFunction; ）将其window.onload = yourFunction; ，尽管window load事件在页面加载过程中很晚才发生。 当然，就像在浏览器上涉及JavaScript的许多事情一样，如果你使用像Prototype ， jQuery ， Closure或其他几个库这样的库，你会发现你的生活会更容易，因为这些可以消除浏览器的差异。 （也就是说，上面的代码适用于我熟悉的任何浏览器。）一旦页面加载，库通常会提供一种处理方式，但通常会发生window load 。 jQuery提供ready函数; Prototype提供了dom:loaded事件; 等等

举例来说，如果你把这个在你结束body标记，它将一切加载后创建的iframe（包括所有图片， window load不火，直到所有图像都加载）：

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

Answer 2

如果你喜欢加载多个iframe您的页面加载后还可以用结合起来setTimeout() .ready()和.each()函数：

标记：

<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（在这种情况下是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);
});

如果从数据库动态获取字符串，此解决方案很有用。 只需确保将iframe源代码段放在DOM中“之前”的iframe中，并在页面加载后将其data-iframe属性附加到iFrame元素。