0

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

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

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 元素，但这个 bug 是不可能的。使用append()or prepend() 方法有同样的错误。

我该如何解决？

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

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>');
4

1 回答 1

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

于 2015-03-13T14:42:14.557 回答