设置 iframe html 的 innerHTML 对文本进行编码答案

【问题标题】：Setting innerHTML of iframe html encodes text设置 iframe html 的 innerHTML 对文本进行编码
【发布时间】：2012-10-12 14:41:57
【问题描述】：

我有一个 iframe，我想用它在我的 WinJS“商店”应用程序中向用户显示 instapaper 文章。一个非常高优先级的功能是用户应该能够在离线时阅读下载和保存的文章。

没有涉及到显示本地缓存的 html 文件比显示来自网络的任意 html 文档更难的所有荒谬之处，我当前的问题/问题是 iframe 以及它如何处理 html 文本。

假设我有一个从文本文件读取的字符串中的 html 文档，如下所示：

  <html>
     <head>
     <title>Foobar!</title>
     </head>
     <body>
          <h1>Foo</h1>
         <div>Bar</div>
     </body>
   </html>

如果我设置<div> 元素的innerHTML 属性（通过WinJS.Utilities.setInnerHTMLUnsafe 方法），然后检查该属性，我会得到我期望的输出：

>document.getElementById("article-frame").innerHTML
"
<title>Foobar!</title>
<h1>Foo</h1>
<div>Bar</div>
"

现在，当我只使用<iframe> 做同样的事情时，结果如下：

>document.getElementsByTagName("iframe")[0].innerHTML
"&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Foobar!&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Foo&lt;/h1&gt;
&lt;div&gt;Bar&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;"

显然，iframe 是对文本进行 HTML 编码，而 div 不是。这是设计使然吗？如果是这样 - 为什么行为会有如此大的不同？我不记得曾经从 iframe 中看到过这种行为，但话说回来，自从我不得不使用 iframe 以来已经有好几年了。我不希望只使用 div，因为我无法防止 CSS 渗入其中（我可以通过将元素 ID 附加到嵌入式样式表来防止 CSS 向相反方向渗入，但这对 UX 没有多大帮助） .

我已经花费了大量时间试图通过src 属性加载一个存储在用户appData 中的文件，但没有成功。这些持续的障碍会让人非常沮丧！

编辑：我尝试设置框架的contentDocument 属性的innerHTML 属性，其结果类似于div 实验，除了不显示或呈现HTML。

有趣的是检查contentDocument 和iframe 的innerHTML 属性的输出（注意后者的空结果）：

> document.getElementsByTagName("iframe")[0].contentDocument.innerHTML
"<html>
<head>
<title>Foobar!</title>
</head>
<body>
<h1>Foo</h1>
<div>Bar</div>
</body>
</html>"
> document.getElementsByTagName("iframe")[0].innerHTML  
""

参考
http://technet.microsoft.com/en-us/subscriptions/hh781229.aspx
http://social.msdn.microsoft.com/Forums/en-US/windowsstore/thread/e13791b2-7fc3-40cb-a284-f927aaa3a9e3

【问题讨论】：

标签： html windows-8 winjs appdata windows-store-apps

【解决方案1】：

我想我明白了。

关键是我最初并没有在我的标记中为iframe 设置src 属性。因为它没有被设置，iframe.contentDocument 没有被创建和设置。

这是我最终得到的解决方案。设置 src 属性可确保创建 contentDocument 属性：

<iframe id="article-frame" src="about:blank"></iframe>

        var frame = document.getElementById("article-frame");
        Article.getFileText(book).done(function (text) {

            MSApp.execUnsafeLocalFunction(function () {                    
              frame.contentDocument.write(text);
            });

我认为我不必在 execUnsafeLocalFunction 调用中包含对 contentDocument.write() 的调用，但由于我也信任（在合理范围内）输入，我认为这不会造成伤害 - 我'我注意到用于字体下载和显示的小 js sn-ps。

【讨论】：