的HTML

Question

请参阅Chrome ver 65。

的HTML

<!-- div display: block. NOT corrupted -->
<div id="block">
<iframe src="https://public.tableau.com/views/Whereyoucanrentviz-Mobile-Radiobutton/Whereyoucanrentcheaperwith10km?%3Aembed=y&%3AshowVizHome=no" width="1200" height="500">
</iframe>
</div>

<input type="button" onClick="javascript:document.getElementById('none_to_block').style.display = 'block';" value="block!" />

<!-- div display: none - click block! button - to block. !!! corrupted !!! -->
<div id="none_to_block">
<iframe src="https://public.tableau.com/views/Whereyoucanrentviz-Mobile-Radiobutton/Whereyoucanrentcheaperwith10km?%3Aembed=y&%3AshowVizHome=no" width="1200" height="500">
</iframe>
</div>

<input type="button" onClick="javascript:document.getElementById('hidden_to_visible').style.visibility = 'visible';" value="visible!" />

<!-- div visibility: hidden - click visible! button - to visible. !!! NOT corrupted !!! -->
<div id="hidden_to_visible">
<iframe src="https://public.tableau.com/views/Whereyoucanrentviz-Mobile-Radiobutton/Whereyoucanrentcheaperwith10km?%3Aembed=y&%3AshowVizHome=no" width="1200" height="500">
</iframe>
</div>

的CSS

#none_to_block {
  display: none;
}
#hidden_to_visible {
  visibility: hidden;
}

jsfiddle

第一个div好了
第二个div是NG
第三个div好了

比照所有OK都可以通过Chrome ver 64。

Chrome ver 65 iframe错误？或Tableau错误？

Answer 1

对问题进行了很好的分析！除了chrome v65之外，这也发生在Internet Explorer上。 @hyukawa你的jsfiddle也可以在IE v11中重现这个问题。

我正在处理同样的问题。我的网页上有几个嵌入了tableau viz（Tableau Server v10.4）的iframe。我使用相同的display：none / block机制来隐藏/显示我页面上的图表。

作为临时解决方法，每次切换显示（无/块）时，我都会调用viz.setFrameSize(width,height)，现在似乎正在工作。

Answer 2

可见性问题：隐藏，它占据了虚拟空间的空白区域。和display的问题：块是，它不是完全渲染viz。

我和hyukawa提供的jsfiddle玩了一下。因此，在visibility：hidden选项中，添加了一些css（position：absolute; top：0; left：0;）为viz parent。它起作用了。

以下是link for jsFiddle

<强> HTML

<div class="viz-container">
  <!-- div display: block. NOT corrupted -->
  <div id="first" class="tableau-viz">
    <iframe src="https://public.tableau.com/views/Whereyoucanrentviz-Mobile-Radiobutton/Whereyoucanrentcheaperwith10km?%3Aembed=y&%3AshowVizHome=no" width="1200" height="500">
    </iframe>
  </div>

  <!-- div visibility: hidden - click visible! button - to visible. !!! NOT corrupted !!! -->
  <div id="second" style="visibility:hidden;" class="tableau-viz">
    <iframe src="https://public.tableau.com/views/180315_class-culture_dotplots/lit-authors?:embed=y&:showVizHome=no&:host_url=https%3A%2F%2Fpublic.tableau.com%2F&:embed_code_version=3&:tabs=no&:toolbar=yes&:animate_transition=yes&:display_static_image=no&:display_spinner=no&:display_overlay=yes&:display_count=yes&:loadOrderID=0" width="1200" height="500">
    </iframe>
  </div>
</div>

<强> CSS

.viz-container {
  position:fixed;  
}

.tableau-viz{
  position: absolute;
  top: 0;
  left: 0;
}

<强>的JavaScript

var displayedViz = "first";

$(document).ready(function(){
    function toggleViz(){
    $(".tableau-viz").css("visibility", "hidden");
    if(displayedViz == "first") {
      $("#second").css("visibility", "visible");
      displayedViz = "second";
    } else {
      $("#first").css("visibility", "visible");
      displayedViz = "first";
    }
    console.log('displayed : ' + displayedViz);
  }

  $("#toggleBtn").on('click', function() {
    toggleViz()
  });
});

Chrome ver 65 iframe错误？或Tableau错误？

的HTML

的CSS

2 个答案: