将iframe的内容而不是src指定到页面

Question

将iframe的内容而不是src指定到页面

我目前正在处理一个表单,除了表单的所有正常字段外,还有上传图片的文件输入,onchange将图片提交给iframe,然后将上传的图片加载到带有要修改的字段的表单中对于他们(如名称和地理定位).由于我无法嵌套表单,file_input也包含在iframe中,所以最后我在iframe中使用了iframe.如此示意,我有这样的事情:

<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>

Run Code Online (Sandbox Code Playgroud)

和iframe中加载的html类似(忽略html,head和body标签)

<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>

Run Code Online (Sandbox Code Playgroud)

这很好用,除了加载第一个iframe需要几秒钟,因此文件输入不会加载到页面的其余部分,并且在视觉上并不理想.我可以解决这个问题,如果可以指定iframe内容而无需加载另一个页面(在第一个iframe中由'file_input_url'指定).

所以,我的问题是,有没有办法在同一个文档中指定iframe内容,或者只能用src属性来表示,所以需要加载另一个页面？

Answer 1

Guf*_*ffa 89

您可以将内容写入iframe文档.例:

<iframe id="FileFrame" src="about:blank"></iframe>

<script type="text/javascript">
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
   doc.close();
</script>

Run Code Online (Sandbox Code Playgroud)

我越了解iframes限制越多,我就越讨厌它们 (10认同)
然而，考虑过这种可能性，必须加载到 iframe 中的 html 很复杂，并且完全用 javascript 处理它以便将其写入 iframe 会使实现过于模糊（到目前为止我更喜欢保持原状）。 (2认同)
@orlox:使用Ajax从服务器获取内容并注入它.如果您不想这样做,请使用您的内容创建一个隐藏的`div`元素,并将其内容放在`<body>`和`</ body>`之间的`iframe`中. (2认同)
如何使用此方法转义单引号？其中一些是 HTML 重要的（例如 class='example'），一些是 CSS 重要的（例如 font-family: 'Verdana';），还有一些是内容（例如 George O'Malley）。 (2认同)
@Dan:要转义要在撇号分隔的JavaScript字符串中使用的任何值,首先要转义反斜杠,然后转义撇号.例如,使用C#在代码中输出一个字符串:`doc.write('<%= html.Replace("\\","\\\\").替换("'","\\'") %>');`. (2认同)

Answer 2

Ayu*_*pta 34

iframe现在支持srcdoc,可用于指定要在内联框架中显示的页面的HTML内容.

[MDN 文档](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-srcdoc) (4认同)
IE不支持此权利,但您可以查看[caniuse](http://caniuse.com/#feat=iframe-srcdoc)获取最新状态. (2认同)

Answer 3

use*_*ser 17

您可以data:在以下位置使用URL src:

var html = 'Hello from <img src="http://stackoverflow.com/favicon.ico" alt="SO">';
var iframe = document.querySelector('iframe');
iframe.src = 'data:text/html,' + encodeURIComponent(html);

Run Code Online (Sandbox Code Playgroud)

<iframe></iframe>

Run Code Online (Sandbox Code Playgroud)

iframe中srcdoc ="..."和src ="data:text/html,..."之间的区别.

使用JavaScript将HTML转换为数据:text/html链接.

你甚至不需要任何 JavaScript：如果转义，可以内联指定 `src` 属性，例如在 PHP 中使用 `rawurlencode`：`<iframe src="<?php echo htmlspecialchars('data:text/html,' .rawurlencode ($content)); ?>"></iframe>` (2认同)

Answer 4

xim*_*imo 5

结合Guffa描述的内容,您可以使用<script type ="text/template"> ... </ script>的解释中描述的技术将 HTML文档存储在特殊script元素中(请参阅链接以获取解释这是如何工作的).这比将HTML文档存储在字符串中要容易得多.

归档时间：	15 年，3 月前
查看次数：	98432 次
最近记录：	6 年，2 月前