2

对于 Metro 风格的应用程序，在 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>

对于这个翻转视图：

  <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 回答