Question

我正在尝试嵌入一个使用javascript和params在网站上创建iframe的tableau对象

embed html的一个例子是

 <script type='text/javascript' src='https://tableau.site.edu/javascripts/api/viz_v1.js'></script>
 <div class='tableauPlaceholder' style='width: 704px; height: 304px;'>
   <object class='tableauViz' width='704' height='304' style='display:none;'>
     <param name='host_url' value='https%3A%2F%site.net.edu%2F' />
     <param name='site_root' value='' /><param name='name' value='DepartmentGoals&#47;DeptGoalsDashboard' />
     <param name='tabs' value='no' /><param name='toolbar' value='no' /></object>
 </div>

我尝试了文档对响应嵌入的说法，但我没有太多运气

<div class="tableauPlaceholder embed-responsive embed-responsive-16by9">
       <object class='tableauViz embed-responsive-item' style='display:none;'>
         <param name='host_url' value='https%3A%2F%site.net.edu%2F' />
         <param name='site_root' value='' /><param name='name' value='DepartmentGoals&#47;DeptGoalsDashboard' />
         <param name='tabs' value='no' /><param name='toolbar' value='no' /></object>
</div>

更新

我访问了tableu文档并且可以使用直接iframe而不使用javascript API和params对象来创建iframe

所以我的更新代码是这样的，嵌入正确但iframe没有响应，它在底部有一个巨大的填充

<div class="row">

    <div align="center" class='embed-responsive embed-responsive-16by9'>
      <iframe class='embed-responsive-item' src="https://tableau.site.edu/views/..." width="704" height="304"></iframe>
    </div>

</div>

Answer 1

您的iframe很可能无法响应，因为您正在设置宽度和高度。

尝试更多类似的内容：

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe> <!--note: no width/height in the iframe -->
</div>

来源：http://getbootstrap.com/components/#responsive-embed

Bootstrap 3 - 如何嵌入响应对象

1 个答案: