0

我在网上看到了一些小部件，它们使用户可以在自己的页面中包含一个简短的 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 或将内容加载到他们的页面中？

4

4 回答 4

3

传统方式（考虑有点混乱；不适用于 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）发生冲突，这对于第三方脚本来说是非常粗鲁的。

于 2010-11-11T23:34:21.760 回答
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);
});
于 2010-11-11T21:55:36.847 回答
2

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

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

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

三个文件涉及 index.html anotherpage.html testIFrame.js

让我知道它是否不成功，或者我为您寻找的内容选择了错误的方向？

肖恩

于 2010-11-11T22:18:06.207 回答
1

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-11T22:02:56.877 回答