javascript - 使用 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 时，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注入(inject)标签的更好说明:

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