2012-10-12 5 views
1

У меня есть iframe, который я хотел бы использовать для отображения статей instapaper для пользователя в моем приложении «store» WinJS. Очень высокоприоритетной особенностью является то, что пользователи должны иметь возможность читать статьи, загруженные и сохраненные в автономном режиме.Настройка innerHTML iframe html кодирует текст

Не попадая во все абсурды, которые делают отображение локально кэшированного html-файла более сложным, чем отображение любого произвольного html-документа из Интернета, моя текущая проблема/вопрос связана с iframe и как он обрабатывает HTML-текст.

Скажем, у меня есть HTML-документ в строку чтения из текстового файла, например, так:

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

Если установить свойство innerHTML <div> элемента (через 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-кодировкой текста, а div - нет. Является ли это по дизайну, и если да - почему на самом деле поведение было бы настолько радикальным? Я не помню, чтобы когда-либо видел подобное поведение из iframes, но опять же, прошло несколько лет с тех пор, как я должен был его использовать. Я бы предпочел не просто использовать div, так как я не могу помешать CSS от него кровоточить (я могу запретить CSS отбрасывать противоположное направление с помощью добавления идентификаторов элементов во встроенные таблицы стилей, но это не очень помогает UX) ,

Я уже потратил нелепое время на попытку получить iframe для загрузки через свойство src файла, хранящегося в appData пользователя, без успеха. Эти постоянные помехи могут очень расстраивать!

EDIT: Я попытался установить innerHTML свойство contentDocument собственности фрейма с результатами, подобных div эксперимента, за исключением того, что HTML не отображается или отображается.

Интересно, а это выход проверки innerHTML свойство как contentDocument и iframe (обратите внимание на пустой результат для последнего):

> 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

ответ

0

Я думаю, что понял.

Ключ в том, что я не был изначально установка атрибута на 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 для загрузки и отображения шрифтов.