Динамическое встраивание объекта с помощью JavaScript - PullRequest
Новая
       34

Динамическое встраивание объекта с помощью JavaScript

0 голосов
/ 17 апреля 2019

Я пытаюсь динамически добавить код встраивания на страницу HTML во время выполнения, используя javascript, но когда я его добавляю, ничего не отображается .

Объект, который я хочу внедрить, представляет собой отчет Tableau Server .Если я помещаю код непосредственно в HTML-страницу, она отображается правильно (вы можете попробовать удалить комментарий из статического контейнера div в скрипте), но если я использую javascript для добавления отчета, он завершится неудачно: 

document.getElementById('dynamic-container').innerHTML ='<div class="tableau-report-viewer">' + decodeURIComponent(data[0].TableauCode.replace(/\+/g, '%20')) + '</div>';

После запуска приведенного выше сценария я вижу, что код правильно добавлен в DOM.

Обратите внимание, что функция вызывается после того, как вызов ajax извлек объект данных (сохраненный как переменная js в примере),DOM полностью загружается при вызове функции.

вот jsfiddle: https://jsfiddle.net/1mknywt5/

1 Ответ

2 голосов
/ 17 апреля 2019

Скрипт таблицы не будет загружаться при обновлении innerHTML элемента div, поскольку браузер пытается предотвратить атаку межсайтового скриптинга. Вы должны предварительно загрузить скрипт, и тогда ваш код будет работать (вы также можете удалить тег скрипта из json). В вашем примере это будет примерно так: 

<script type='text/javascript' src='https://analytics.wfp.org/javascripts/api/viz_v1.js'></script>
<h2>Hello world</h2>
<div id="dynamic-container"></div>
<hr/>

Более подробное объяснение того, почему вы не можете внедрять теги с использованием innerHTML, можно найти в следующей ссылке в разделе Соображения безопасности раздел:

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

...