3

我想创建一个没有 src ( about:blank ) 的 iframe，但 iframe 内容一些 javascript html

我需要这样做，因为我不想在服务器上为此任务创建托管网页，这将与服务器建立更多连接，这对资源不利。并且也不想在网页上直接编写 javascript html，因为它们在加载/运行时使网页加载速度变慢。

如何通过使用 javascript（可能是 jquery）来做到这一点？

iframe 例如：

<iframe src="about:blank" width="300" height="250" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" ></iframe>

及其内容：

<div>xxx</div>
<script type="text/javascript">var abc=1 </script>
<script type="text/javascript" src="http://1234.net/js.js"></script>

更新

感谢以下一些回答。但我需要澄清该脚本也将通过 javascript 创建 iframe，因为需要在具有不同 id 的页面中创建 iframe。请看我的测试：http: //jsfiddle.net/rDkEw/

问题是：如果使用document.body.appendChild，iframe 将在网页主体上创建，但我需要将它保存在保存 JavaScript 的当前 div 中。

4

5 回答 5

9

对于 2016 年之后搜索此内容的所有人：使用 data: URL，以 data: 方案为前缀的 URL，允许内容创建者将小文件内嵌在文档中。

<iframe src="data:text/html, <h1>Your HTML</h1>"></iframe>
于 2017-10-21T00:03:06.820 回答
4

An<iframe>有一个contentDocument属性来表示它的……内容的文档。你可以write()在上面使用。这是一个演示。

于 2013-02-26T04:42:41.097 回答
2

你可以这样做：

var iframe = document.getElementById('iframeid');

var div_el = document.createElement('div');
div_el.innerHTML = "....";
iframe.contentWindow.document.body.appendChild(div_el);

一个jQuery解决方案：

$('#iframeid').contents().find('body').append("<div>.....</div>");
于 2013-02-26T04:41:46.297 回答
0

您可以按照此处所述将任何内容添加到 iframe 中的页面，但由于您没有加载页面，我怀疑您添加到此页面的 javascript 是否可以正常工作。你可以试一试。

于 2013-02-26T05:02:15.647 回答
0

使用 jQuery：

$('#myIframe').appendTo('#iframeDiv');

你的 iframe id = "myIframe"

你的 html 内容 div id = "iframeDiv";

注意：没有 jQuery，其他两个答案似乎非常合适。

于 2013-02-26T04:46:00.643 回答