如何创建iframe:没有src的空白但内容是html javascript

时间:2013-02-26 04:36:43

标签: javascript iframe

我想创建一个没有src的iframe(about:blank)但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中。

5 个答案:

答案 0 :(得分:5)

2016年之后搜索此内容的所有人:使用data: URL,前缀为data:scheme的网址,允许内容创建者将小文件嵌入文档中。

<iframe src="data:text/html, <h1>Your HTML</h1>"></iframe>

答案 1 :(得分:4)

<iframe>有一个contentDocument属性,表示其内容的文档。你可以使用write()Here’s a demo.

答案 2 :(得分: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>");

答案 3 :(得分:1)

使用jQuery:

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

你的iframe id =“myIframe”

你的html内容div id =“iframeDiv”;

注意:没有jQuery,其他两个答案看起来非常合适。

答案 4 :(得分:0)

您可以按照here所述向iframe页面添加任何内容,但由于您没有加载页面,我怀疑您添加到此页面的javascript是否有效。你可以尝试一下。