1

我有一个 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>
"

现在，当我只使用 a 做同样的事情时<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。

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

> 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

4

1 回答 1

0

我想我想通了。

关键是我最初并没有srciframe在我的标记中设置属性。因为它没有被设置，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 片段和展示。

于 2012-10-14T20:08:42.830 回答