如何通過JavaScript代碼段顯示iframe？

Question

我在線上看到了一些小部件，這些小部件使用戶可以在自己的頁面中包含一個簡短的Javascript代碼段，當執行時，該代碼段將顯示Iframe，如以下示例所示。

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script><fb:facepile></fb:facepile>

我怎么能自己做到這一點-在我的服務器上安裝一個javascript，當在遠程服務器上調用該javascript時，它會寫出iframe或將內容加載到其頁面中？

Answer 1

傳統方式（考慮到有些混亂；不適用於XHTML-as-XML主機頁面；如果通過異步在頁面加載后調用，則會炸毀整個頁面）：

document.write('<iframe src="http://www.example.com/myframe" width="100" height="100"></iframe>');

或者使用innerHTML到頁面上具有預定義名稱的元素：

document.getElementById('examplecomframe').innerHTML= '<iframe src="http://www.example.com/myframe" width="100" height="100"></iframe>';

或使用DOM插入到當前<script>前面（盡管再次延遲，如果再延遲，則可能無法預測）：

(function() {
    var iframe= document.createElement('iframe');
    iframe.src= 'http://www.example.com/myframe';
    iframe.width=iframe.height= 100;
    document.getElementById('examplecomframe').appendChild(iframe);
})();

或在當前腳本之前插入：

    var scripts= document.getElementsByTagName('script');
    var script= scripts[scripts.length-1];
    script.parentNode.insertBefore(iframe, script);

我不會使用jQuery來包含第三方腳本。 僅出於幾行JS的原因，您必須將整個沉重的框架加載到封閉頁面中。 這可能會導致與宿主頁面使用的其他框架（或jQuery的不同版本）發生沖突，這對於第三方腳本而言是非常不禮貌的。

Answer 2

要使用jQuery生成標簽，可以使用$('<tagname />')並傳遞帶有參數的對象（例如src ）。 然后，將此iframe附加到Dom。 使用html()您可以將所選元素（在本例中為ID為example的標記）的html-content設置為iframe。

$(function() {     
  var iframe = $('<iframe />', {
    src: 'http://example.com',
    width: 100,
    height: 100
  });

  $('#example').html(iframe);
});

Answer 3

我認為您可能對此有些困惑。 它的工作方式是這樣的：1.用戶從您的域/服務器請求頁面，頁面得到服務。 2.用戶機器上的客戶端網絡瀏覽器解釋所述頁面，如果腳本塊在其他位置包括對js文件的引用，則獲取所述js文件。 3. Javascript由客戶端瀏覽器處理。

因此，實際上，您需要的只是服務器上的JS文件（純舊ASCII），並讓它執行一些document.write（）調用來添加您想要添加的代碼，例如：

轉到http://www.shaunhusain.com/TestIFrameViaJS

其中涉及三個文件index.html anotherpage.html testIFrame.js

如果無法解決問題，請告訴我，否則我為您要找的東西指明了錯誤的方向？

肖恩

Answer 4

http://api.fatherstorm.com/test/4159620.php

為此使用jQuery ...

$(document).ready(function() {
   $('#fb-root').append('<iframe/>');
   $('#fb-root iframe')
        .attr('id','my_iframe')
        .attr('src','http://www.cnn.com')
        .css('width','100%')
        .css('height','100%')
        .attr('frameborder','no');
 });