設置IFRAME的HTML編碼的innerHTML文本

我有，我想用我的WinJS「商店」應用程序，以顯示給用戶Instapaper的文章iframe中。這是一個非常重要的功能，用戶應該能夠閱讀下載和離線保存的文章。設置IFRAME的HTML編碼的innerHTML文本

沒有深入瞭解顯示本地緩存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> 
"

現在，當我能做的只有用同樣的事情，這就是結果：

>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編碼的文本，而股利不是。這是設計，如果是這樣 - 爲什麼地球上的行爲會如此不同？我不記得從iframe中看到過這種行爲，但是再一次，我已經使用了很多年了。我寧願不只是使用一個div，因爲我不能阻止CSS從出血到它（我可以阻止CSS經由但是附加元素的ID嵌入樣式出血相反的方向，不利於UX非常多）。

我已經花費了大量的時間試圖讓iframe通過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 
""

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

來源

2012-10-12 Josh E

我想我想通了。

關鍵是我最初並沒有在我的標記中設置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); 
      });

我不認爲我有電話換到contentDocument.write()在execUnsafeLocalFunction電話，但因爲我也信任（內理由的限制）輸入，我不認爲它會傷害 - 我已經注意到用於字體下載和顯示的小部分js片段。

來源

2012-10-14 20:08:42

設置IFRAME的HTML編碼的innerHTML文本

回答

相關問題