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，在远程服务器上调用时，写出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>';

或者在当前<script>之前插入DOM（尽管如果延迟则可能无法预测）：

(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()，您可以将所选元素的html内容（在本例中为标识为example的标记）设置为iframe。

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

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

Answer 3

我想你可能有点混淆了。它的工作方式是这样的： 1.来自您的域/服务器的用户请求页面，页面已送达。 2.用户机器上的客户端web浏览器解释所述页面，如果脚本块包括对某个其他位置的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');
 });

如何通过Javascript代码段显示iframe？

4 个答案: