代码之家 › 专栏 › 技术社区 › Giox

用javascript动态嵌入对象

tableau embed javascript

Giox · 技术社区 · 5 年前

动态在运行时使用javascript将嵌入代码添加到HTML页面中,但在添加时 没有显示任何内容 .

我要嵌入的对象是来自的报表 . 如果我将代码直接放在HTML页面中,则会正确显示(您可以尝试在fiddle中取消对div静态容器的注释),但是如果我使用javascript添加报告,则会失败:

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

请注意,该函数是在ajax调用检索到数据对象(在示例中存储为js变量)之后调用的。在调用函数时,DOM将被完全加载。

https://jsfiddle.net/1mknywt5/

0 回复 | 直到 5 年前

George Koniaris 5 年前

当您使用更新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