如何通过JavaScript代码显示iframe？

我已经在网上看到了一些小部件，它给了用户在他们自己的页面中包含一个简短的JavaScript代码片段的可能性，它在执行时会显示一个Iframe，如下例所示。如何通过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或负载内容到他们的网页？

来源

2010-11-11 Industrial

我认为你可能有这是如何工作有点混淆。它的工作方式是这样的： 1.从您的域/服务器页面提供用户请求页面。 2.用户机器上的客户端web浏览器解释所述页面，如果脚本块在某个其他位置包括对js文件的引用，则取出所述js文件。 3. Javascript由客户端浏览器处理。

所以真的，所有你需要的是服务器上的JS文件（普通的旧ASCII），并把它做一些document.write（）的调用来添加你想要添加的代码，例如：

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

三个文件有参与的index.html anotherpage.html testIFrame.js

让我知道，如果它不工作了还是我把你要寻找一个错误的方向？

肖恩

来源

2010-11-11 22:18:06 Shaun

简直不敢相信。非常感谢！ – Industrial 2010-11-12 14:18:28

要使用jQuery生成标签，您可以使用$('<tagname />')并传递带参数的对象（例如src）。之后，您将此iframe添加到Dom。使用html()，您可以将选定元素的html内容（在本例中为标识为example的标记）设置为您的iframe。

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

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

来源

2010-11-11 21:55:36 pex

工作，假设客户端有链接到jQuery。 – jball 2010-11-11 21:58:52

@jball：至少他在他的问题中加了一个'jQuery'-Tag – pex 2010-11-11 22:03:52

没错，对@ @ Industrial来说这只是一个糟糕的假设 - 我不确定这将是一个安全的假设。 – jball 2010-11-11 22:10:57

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'); 
});

来源

2010-11-11 22:02:56 FatherStorm

传统的方式（被认为有点乱，不会与XHTML，作为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）发生冲突，这对第三方脚本来说非常粗鲁。

来源

2010-11-11 23:34:21 bobince

如何通过JavaScript代码显示iframe？

回答

相关问题