Chrome 65版本iframe异常：是浏览器Bug还是Tableau Bug？

咱们一步步来拆解这个问题，先把你的场景理清楚：当div默认是display:block的时候，嵌入的Tableau iframe显示完全正常，但通过按钮把原本设为display:none的div切换成block时，对应的iframe就出问题了。要搞清楚是Chrome 65的iframe Bug还是Tableau的问题，咱们可以从这几个方向排查：

一、先验证Chrome 65的iframe基础行为（排除浏览器Bug） #

• 先把Tableau的iframe换成一个普通的测试iframe，比如嵌入静态页面：

  <div id="none_to_block" style="display:none;">
    <iframe src="https://example.com" width="1200" height="500"></iframe>
  </div>
  <input type="button" onClick="document.getElementById('none_to_block').style.display = 'block';" value="显示测试iframe">
  

  如果这个测试iframe点击按钮后能正常显示，说明Chrome 65的iframe本身在从display:none切换到block时没有基础Bug，问题大概率出在Tableau的嵌入逻辑上。
• 另外，Chrome 65是2018年的老版本，你可以查一下当时的已知Bug记录，看有没有关于iframe在display切换时的渲染异常、资源加载失败这类问题。如果测试普通iframe也有同样的异常，那基本可以锁定是Chrome 65的Bug。

二、排查Tableau嵌入的特殊逻辑 #

• 检查Tableau的加载机制：Tableau的可视化嵌入可能依赖页面加载时的容器尺寸计算、DOM渲染时机。当父元素一开始是display:none时，iframe可能无法正确获取容器尺寸，或者初始化脚本没触发。
• 试试手动触发Tableau视图刷新：在显示div之后，调用Tableau的API重新渲染视图，比如：

  function showTableau() {
    const targetDiv = document.getElementById('none_to_block');
    targetDiv.style.display = 'block';
    // 获取Tableau实例并刷新
    const tableauViz = new tableau.Viz(targetDiv.querySelector('iframe'));
    tableauViz.refreshDataAsync();
  }
  

  如果刷新后视图正常显示，说明问题出在Tableau没有处理父元素从不可见变为可见的场景，属于Tableau的嵌入逻辑问题。
• 跨环境对比测试：在Chrome 65之后的版本（比如Chrome 70+）或者其他浏览器（Firefox、Edge）里跑同样的代码，如果其他环境下一切正常，那可能是Chrome 65和Tableau嵌入逻辑的兼容性问题。

三、临时解决方案（根据排查结果） #

• 如果是Chrome 65的Bug：可以用visibility:hidden替代display:none来隐藏元素（这样元素仍占据布局空间，iframe初始化不会被打断）；或者在显示时强制触发元素重绘：

  const targetDiv = document.getElementById('none_to_block');
  targetDiv.style.display = 'block';
  targetDiv.offsetHeight; // 强制触发重绘
  

• 如果是Tableau的问题：可以在页面加载时先让父元素处于display:block但visibility:hidden状态，点击按钮时再切换为visibility:visible，这样Tableau的初始化能正常完成；或者改用Tableau官方的JS API来初始化视图，而不是直接写iframe标签。

内容的提问来源于stack exchange，提问作者hyukawa