如何通过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');
 });