2

Windows 8 のメトロ スタイル アプリの場合、フリップ ビュー コントロールに渡す記事のリストがあります。各記事には、javascript を含む HTML の説明テキストがあります。安全でないコンテンツを innerHTML にロードするには、この関数を使用する必要があることはわかっています。

 var someElement = document.getElementById('someElementID');
 MSApp.execUnsafeLocalFunction(
 function() { someElement.innerHTML = '<div onclick="console.log(\"hi\");">hi</div>' }
 );

しかし、私の innerHTML プロパティがテンプレート内にある場合、どうすればそれを達成できますか?

ここに私のテンプレートがあります:

 <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
 <div class="itemDetail fragment">
   <header aria-label="Header content" role="banner">
 <!--       <button class="win-backbutton" aria-label="Back" disabled></button>-->
        <h1 class="titlearea win-type-ellipsis">
            <span class="pagetitle"></span>
        </h1>
    </header>
    <section aria-label="Main content" role="main">
        <article>
            <img class="article-image" src="#" style="width: 300px; height: 200px;" data-win-bind="src:  urlImage; alt: title" />
            <div class="item-content" data-win-bind="innerHTML: description"></div>
        </article>
    </section>
     </div>
  </div>

この FlipView の場合:

  <div id="basicFlipView" 
data-win-control="WinJS.UI.FlipView"
      data-win-options="{itemTemplate:select('#ItemTemplate')}">
 </div>

そして、ここに私がそれを埋める方法があります:

        var dataControl = document.getElementById("basicFlipView").winControl;
        dataControl.itemDataSource = dataList.dataSource;
        dataControl.currentPage = myState.index;

ご助力ありがとうございます

編集: Dominic Hopton が提案したように、WinJS.Binding.initializer を使用しました。これはバインディングを行う非常に複雑な方法です。これを実行しましたが、正しく動作しません。何かおかしくないですか :

 var toUnsafeHTML = WinJS.Binding.initializer(
     function toUnsafeHTML(source, sourceProperty, dest, destProperty) {


     function setUnsafeHTML() {
         MSApp.execUnsafeLocalFunction(
         function () { dest.innerHTML = source.innerHTML }
         );
     }

     return WinJS.Binding.bind(source, {
         innerHTML : setUnsafeHTML}
     );

 }
 );

//
// Binding initializers have to be public, so publish this out
// via a namespace
//
WinJS.Namespace.define("TemplateControl", {
    toUnsafeHTML: toUnsafeHTML
});

そしてhtmlで：

 <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
 <div class="itemDetail fragment">
   <header aria-label="Header content" role="banner">
 <!--       <button class="win-backbutton" aria-label="Back" disabled></button>-->
        <h1 class="titlearea win-type-ellipsis">
            <span class="pagetitle"></span>
        </h1>
    </header>
    <section aria-label="Main content" role="main">
        <article>
            <img class="article-image" src="#" style="width: 300px; height: 200px;" data-win-bind="src:  urlImage; alt: title" />
            <div class="item-content" data-win-bind="innerHTML: TemplateControl.toUnsafeHTML"></div>
        </article>
    </section>
     </div>
  </div>

setUnsafeHTML 関数に入ることはありません...

4

1 に答える 1

0

少なくとも私がテストしたいくつかの手法のいずれも使用せずに、データバインディングを使用してこれが可能かどうかはわかりません。

そうは言っても...あなたがこれを行うことができたとしても...あなたがロードしている記事がインターネットから来ているなら、これは非常に悪い考えでしょう。

ネットワークからスクリプトをロードすると、悪意のあるコードが含まれている可能性があります。この制限が存在する理由は、潜在的なエクスプロイトからあなた（そしてさらに重要なことに、あなたのアプリを使用する人）を保護するためです。

まだ読んでいない場合は、execUnsafeLocalFunctionのドキュメントを読んでください。ローカルアプリのコンテキストでWebからスクリプトを挿入しようとするのが悪い考えである理由が詳しく説明されています。

http://msdn.microsoft.com/en-us/library/windows/apps/Hh767331.aspx

（「HTMLの動的な追加」というタイトルのセクション）も参照してください。

http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx

と：

http://msdn.microsoft.com/en-us/library/windows/apps/hh465388.aspx

これは、安全または安全でないと見なされるタグ、属性、およびCSSプロパティを一覧表示します。

お役に立てば幸いです。

于 2012-08-14T17:33:09.580 に答える