Question

我有一个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没有多大帮助）。

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

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

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

iframe

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

Answer 1

我想我明白了。

关键是我最初没有在我的标记中设置src 上的iframe属性。因为没有设置，所以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);
            });

我不认为我必须在contentDocument.write()电话中打电话给execUnsafeLocalFunction，但由于我也相信（在合理范围内）输入，我不认为伤害 - 我注意到字体下载和显示的小js片段。

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

1 个答案: