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