Question

我正在尝试在运行时使用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/

Answer 1

当您使用更新div的innerHTML时，不会加载tableau脚本，因为浏览器试图阻止跨站点脚本攻击。您必须预先加载脚本，然后代码才能工作（您可能还希望从json中删除script标签）。在您的示例中，将是这样的：

<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

用javascript动态嵌入对象

1 个答案: