Cordova Windows Phone 8.1: innerHTML добавляет дополнительные теги HTML

Я использую Visual Studio 2013 (Community) для создания приложения с Cordova 4.3.0. Я нацеливаюсь на WP8.1 (настройка Windows Phone (Universal) для эмулятора).

Я создал приложение из шаблона "Пустое приложение (Apache Cordova)" из VS2013.
Затем я добавил простой код, который изменяет DOM document.innerHTML когда deviceready событие прослушивается.

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>');
Источник

1 ответ

Решение

По умолчанию innerHTML блокируется правилами безопасности на уровне платформы для приложений JavaScript для Windows, так как это создает риск для внедрения скрипта. Эта платформа является основой для поддержки Windows и Windows Phone 8.1.

К счастью, есть ployfill, предназначенный для облегчения этой проблемы: https://github.com/MSOpenTech/winstore-jscompat

Ранее в jscompat shim была ошибка, которая могла приводить к добавлению дополнительных элементов HTML в DOM. Шим jscompat включен в шаблоны VS по умолчанию и активен только для платформы Windows (не WP8), так что это может быть тем, с чем вы столкнулись. Возьмите последнюю библиотеку по ссылке выше, и она должна решить вашу проблему.

Источник
Другие вопросы по тегам