使用 javascript 动态嵌入对象

Question

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

我要嵌入的对象是来自 Tableau Server 的报告。如果我直接把代码放在 HTML 页面是正确显示的（你可以自己尝试取消注释 fiddle 中的 div static-container），但是如果我使用 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/

Answer 1

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

您将在以下 安全注意事项 部分下的 link 中找到关于为什么不能使用 innerHTML 注入标签的更好解释：

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

使用 javascript 动态嵌入对象

Embedding dynamically an object with javascript

javascript

embed

tableau-api