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

Question

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

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

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 方法具有相同的错误。

我该如何解决？

---

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

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）有效，所以这可能是您遇到的问题。从上面的链接中获取最新的库，它应该可以解决您的问题。