如何创建 iframe about:blank 没有 src 但内容 html javascript

How to create iframe about:blank without src but content html javascript

提问by Binh Nguyen

I want to create a iframe without src ( about:blank ) but that iframe content some javascript html

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

I need to do it because I don't want create a hosted webpages on server for this mission, this will make more connection to server which are no good for resource. And also don't want to write direct javascript html on webpage because they make the webpage load slow most time when load/running.

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

How to do it by using javascript (jquery maybe )?

如何通过使用 javascript (jquery 也许) 来做到这一点？

iframe eg :

iframe 例如：

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

and its content:

及其内容：

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

UPDATE

更新

Thanks for some answered following. But I need to clarify that script will create iframe by javascript also, because the need to create iframes in one page with different ids. Please look at my test: http://jsfiddle.net/rDkEw/

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

The problems are: if use document.body.appendChild, the iframe will create on body of webpage, but I need it to keep it inside the current div which hold the JavaScript.

问题是：如果使用document.body.appendChild，则 iframe 将在网页正文上创建，但我需要将其保留在包含 JavaScript 的当前 div 中。

采纳答案by james emanon

With jQuery:

使用 jQuery：

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

your iframe id = "myIframe"

你的 iframe id = "myIframe"

your html content div id = "iframeDiv";

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

note: without jQuery, the two other answers seem perfectly suited.

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

回答by nodws

For everyone googling this after 2016:Use a data: URL, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents.

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

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

回答by Ry-

An <iframe>has a contentDocumentproperty representing its… content's document. You can use write()on that. Here's a demo.

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

回答by Starx

You can do it like this:

你可以这样做：

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

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

A jQuery solution:

一个 jQuery 解决方案：

$('#iframeid').contents().find('body').append("<div>.....</div>");

回答by Mujtaba Hassan

You can add any content to page in iframe as described herebut as you don't have a page loaded I doubt the javascript you add to this page will work. You can give it a try.

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