使用javascript动态嵌入对象答案

【问题标题】：Embedding dynamically an object with javascript使用javascript动态嵌入对象
【发布时间】：2019-04-17 23:33:48
【问题描述】：

我正在尝试动态在运行时使用 javascript 将嵌入代码添加到 HTML 页面中，但是当我添加它时没有显示任何内容。

我要嵌入的对象是来自 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/

【问题讨论】：

标签： javascript embed tableau-api

【解决方案1】：

当您使用更新 div 的 innerHTML 时，不会加载 tableau 脚本，因为浏览器试图阻止跨站点脚本攻击。您必须预加载脚本，然后您的代码才能工作（您可能还想从 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

【讨论】：