Cordova Windows Phone 8.1 : innerHTML 添加额外的 html 标签

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

我从VS2013的模板"空白应用程序（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 merthods具有相同的错误。

我该如何解决？

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

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

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

幸运的是，有一个策略旨在缓解这个痛点：https://github.com/MSOpenTech/winstore-jscompat

之前 jscompat 填充码中存在一个错误，可能会导致额外的 HTML 元素添加到 DOM 中。默认情况下，jscompat 填充程序包含在 VS 模板中，并且仅在 Windows 平台（不是 WP8）上处于活动状态，因此这可能是您遇到的问题。从上面的链接中获取最新的库，它应该可以解决您的问题。

相关内容

最新更新

热门标签：