Question

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

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

Answer 1

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

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

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

例如，如果您将其放在dom:loaded代码的末尾，则会在其他其他内容已加载后创建iframe（包括所有图片，body { {1}}在所有图像都已加载之前不会触发）：

window

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元素。

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

2 个答案: