cordova windows phone 8.1：innerHTML 添加额外的 html 标签

Question

我使用 Visual Studio 2013（社区）使用 Cordova 4.3.0 创建应用程序。我的目标是 WP8.1（"Windows Phone (Universal)" 模拟器设置）。

我从 VS2013 的模板 "Blank App (Apache Cordova)" 创建了一个应用程序。
然后，我添加了一个简单的代码，在侦听 deviceready 事件时将 DOM 修改为 document.innerHTML。

var elt = document.getElementById('test');
elt.innerHTML = '<p>add a P in the DIV</p>';

更新前我有：

<div id="test"></div>

然后 javascript 完成工作：

<div id="test">
  <head></head>
  <body>
    <p>add a P in the DIV</p>
  </body>
</div>

<p> 包裹在 <body> 中，就好像 <div> 是 <html>

如果我使用 Windows Phone 8（不是 8.1）模拟器（或设备），则不会发生这种情况。

我需要动态注入 DOM 元素，但这个错误是不可能的。使用append()或prepend()jquery方法也有同样的bug。

我该如何解决？

编辑： 如果我使用节点操作，结果是正确的。

var para = document.createElement("p");
var node = document.createTextNode("add a P in the DIV");
para.appendChild(node);

var element = document.getElementById("test");
element.appendChild(para);

但是创建一个 HTML 结构更复杂，它很快就会变得非常冗长。

不知道？

我找到了另一个更漂亮的解决方案。

var elt = document.getElementById('test');
elt.innerHTML = '';  // remove content works without head/body insertion
elt.insertAdjacentHTML('beforeend', '<p>add a P in the DIV</p>');

Answer 1

innerHTML 默认情况下在 Windows JavaScript 应用程序的平台级别被安全规则阻止，因为它会带来脚本注入的风险。该平台是 Windows 和 Windows Phone 8.1 支持的基础。

幸好有一个ployfill可以缓解这个痛点：https://github.com/MSOpenTech/winstore-jscompat

之前的 jscompat shim 中存在一个错误，可能导致将额外的 HTML 元素添加到 DOM。默认情况下，jscompat shim 包含在 VS 模板中，并且仅在 Windows 平台（不是 WP8）上有效，因此这可能是您运行的目标。从上面的 link 中获取最新的库，它应该可以解决您的问题。

cordova windows phone 8.1：innerHTML 添加额外的 html 标签

cordova windows phone 8.1 : innerHTML add extra html tags

innerhtml

visual-studio-2013

windows-phone-8.1

cordova-4

visual-studio-cordova