指定iframe的内容而不是页面的src属性

88

我目前正在处理包含一些文件输入以上传图片的表单。onchange()对于这些输入，有一个事件将图片提交到iframe，然后将上传的图片动态加载到表单中，并为其修改字段（例如name和geo-localization）。

由于我无法嵌套表格，因此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>

并加载到该HTMLiframe是一样的东西（不包括html，head和body标签）

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

这很有效，除了载入第一个需要花费几秒钟的事实之外iframe，因此文件输入不会随页面的其余部分一起载入。这在视觉上不是理想的。如果我可以指定iframe内容而不需要加载另一个页面（file_input_url在第一个中由指定），则可以解决iframe。

有没有一种方法可以iframe在同一文档中指定内容，或者只能使用src需要另一页加载的属性来指定它？

html iframe

— Orlox
source

加载该iframe不需要花几秒钟的时间。我希望它更像是十分之一毫秒加上“叮咬时间”（也应该是毫秒）。您应该调查造成所有延迟的原因-服务器可能出了点问题。

— Abhi Beckert

95

您可以.write()将内容放入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>

— 古法
source

1

曾经考虑过这种可能性，但是，必须加载到iframe中的html很复杂，并且完全用javascript处理以将其写入iframe会掩盖实现方式（直到我更喜欢保持原状）。

— orlox

2

@orlox：使用Ajax从服务器获取您的内容并将其注入。如果你不想一直这样下去，做一个隐藏的div元素与您的内容并把它的内容在iframe之间<body>和</body>。

— 堆叠

11

我对iframe限制的了解越多，我就越讨厌它们

— John Magnolia 2014年

1

如何使用这种方法转义单引号？其中一些是HTML重要的（例如class ='example'），一些是CSS重要的（例如font-family：'Verdana';），而另一些是内容（例如George O'Malley）。

— Dan Bechard

2

@Dan：要转义用撇号定界的JavaScript字符串中使用的任何值，请先转义反斜杠，然后转义撇号。例如，使用C＃在代码中输出字符串：doc.write('<%= html.Replace("\\", "\\\\").Replace("'", "\\'") %>');。

— Guffa

36

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

— 阿育·古普塔（Ayush Gupta）
source

2

IE不支持此权利，但您可以检查caniuse的最新状态。

— Ayush Gupta 2015年

关于MDN的文档

— Benoit Blanchon，

22

您可以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);

<iframe></iframe>

展开摘要

iframe中srcdoc =“…”和src =“ data：text / html，…”之间的区别。

使用JavaScript将HTML转换为data：text / html链接。

— 用户
source

1

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

— Jake

微软增加了对这种支持在几乎相同的时间，因为他们增加的支持srcdoc，并且srcdoc是更好的方式来做到这一点。数据URL仅广泛支持图像和CSS-据我所知，没有Internet Explorer版本在iframe中支持它们。

— Abhi Beckert

6

与Guffa描述的内容结合使用，您可以使用<script type =“ text / template”> ... </ script>的说明中描述的技术将 HTML文档存储在特殊script元素中（有关以下内容的说明，请参见链接）如何运作）。这比将HTML文档存储在字符串中要容易得多。

— 西莫
source

再三考虑，这对于完整的HTML文档来说效果不佳。标签如<html>，<body>，<script>只会混淆的浏览器，打破了文档的渲染。

— ximo 2011年

这似乎不是问题，脚本中的HTML标记将被忽略。

— HBP 2013年

您是对的：)当我编写该技术时，我实际上还没有尝试过该技术，所以一定是从某个地方开始的。后来我发现，<script>标签中的任何内容都将被浏览器忽略。。感谢您纠正我！

— ximo