html 页面不在iframe,关于html：指定iframe的内容而不是src到页面的内容

我目前正在处理一个表单，除了表单的所有普通字段外，它还具有上载图片的文件输入，一旦更改，就会将图片提交到iframe，然后通常将上载的图片加载到表单中，并为其修改字段(如名称和地理位置)。因为我不能嵌套表单，所以文件输入也包含在iframe中，所以最后我在iframe中使用iframe。所以简而言之，我有这样的东西：

加载在iframe中的html类似于(忽略html、head和body标记)

号

这很好，只是加载第一个iframe需要几秒钟，因此文件输入不会与页面的其余部分一起加载，并且在视觉上不理想。如果可以指定iframe内容而不需要加载另一个页面(由第一个iframe中的"file_input_url"指定)，我可以解决这个问题。

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

您可以将内容写入iframe文档。例子：

var doc = document.getElementById('FileFrame').contentWindow.document;

doc.open();

doc.write('

Hello world.');

doc.close();

然而，考虑到这种可能性，必须加载到iframe中的HTML是复杂的，并且完全用javascript处理它以便将其写入iframe将使实现变得过于模糊(直到我更喜欢保持原样为止)。

@Orlox：使用Ajax从服务器获取内容并注入。如果你不想这样做，用你的内容制作一个隐藏的div元素，并把它的内容放在iframe中和之间。

我对iframes限制了解得越多，我就越讨厌它们。

@Stackular i他可以使用Ajax，他也可以在iframe中简化src。

这个解决方案很好。我还没有在所有浏览器中进行测试，但这允许我在body标签中编写完整的HTML文档，并尊重这些属性。与所有其他解决方案不同，这似乎是在不一定程度上操纵的情况下，将HTML代码写入包含头部、身体标签的框架。它也不影响我处理的各种编码，JS解决方案调用escape()，将utf-8转换为%u####，但在帧中没有正确显示。

如何使用此方法转义单引号？其中一些是HTML重要的(例如class='example')，一些是CSS重要的(例如font-family:'verdana'；)，一些是内容(例如george o'malley)。

@dan：要转义撇号分隔的javascript字符串中使用的任何值，首先转义反斜杠，然后转义撇号。例如，使用c_输出代码中的字符串：doc.write('');。

@Guffa我自己(通过尝试和错误)计算出了一半，但另一半没有。谢谢你的小费！

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

IE不支持这个权利，但是你可以检查一下Canius的最新状态。

ie:github.com/jugglinmike/srcdoc-polyfill有一个polyfill/shim

您可以在src中使用data:URL：

var html = 'Hello from ';

var iframe = document.querySelector('iframe');

iframe.src = 'data:text/html,' + encodeURIComponent(html);

号

iframe中srcdoc=…"和src="data:text/html，…"之间的差异。

使用javascript将HTML转换为数据：文本/HTML链接。

您甚至不需要任何javascript：如果转义，则可以内联指定src属性，例如在php:中使用rawurlencode。

结合Guffa所描述的，您可以使用