1

WinJSの「ストア」アプリでユーザーにインスタペーパーの記事を表示するために使用したいiframeがあります。これの非常に優先度の高い機能は、ユーザーがオフライン中にダウンロードして保存した記事を読めるようにすることです。

ローカルにキャッシュされた html ファイルを表示することを、Web から任意の 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 を使用しなければならなくなってから何年も経っています。CSS が div に流れ込むのを防ぐことができないため、単に div を使用しないことをお勧めします (要素 ID を埋め込みスタイルシートに追加することで、CSS が逆方向に流れ込むのを防ぐことができますが、それは UX にはあまり役立ちません)。 .

私はすでにsrc、ユーザーの appData に保存されているファイルをプロパティ経由で iframe にロードさせようとして、途方もない時間を費やしましたが、成功しませんでした。これらの継続的な障害は、非常に苛立たしいものになる可能性があります。

innerHTML編集:フレームのプロパティのプロパティを設定しようとしましたが、HTML が表示またはレンダリングされないことを除いてcontentDocument、実験と同様の結果が得られました。div

興味深いことに、と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

私はそれを理解したと思います。

重要なのは、マークアップで最初に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 スニペットと画面。

于 2012-10-14T20:08:42.830 に答える