页面嵌入多个响应式Datawrapper iframe高度异常解决方法

问题现象 #

• 单个Datawrapper响应式图表嵌入页面时显示完全正常；同页面嵌入2个及以上图表时，始终是排列在第二位及之后的图表高度显示异常，高度远小于实际应有值，调换嵌入代码顺序后，依然是排在后面的图表出问题。
• 临时方案为手动编写CSS媒体查询，给对应iframe硬编码不同视口下的固定高度，但该方案需要手动测算每个图表在不同宽度下的布局断点，新增图表时需要重复调整高度参数，维护成本极高。

临时方案代码如下：

<style>
    /* 大屏高度 */
    iframe {
        height: 376px;
    }

    /* 小屏高度 */
    @media screen and (max-width: 1140px) {
        iframe {
            height: 573px;
        }
    }
</style>

问题根因 #

该问题是Datawrapper嵌入式响应式脚本的初始化逻辑缺陷导致：默认的嵌入脚本只会在页面首次加载时执行一次高度计算，DOM顺序靠后的iframe在初始化时如果父容器尺寸计算时机滞后，脚本不会二次触发高度更新，直接给后加载的iframe设置极小的默认高度，导致显示异常。

通用零维护成本解决方案 #

方案1：使用官方标准响应式嵌入逻辑（优先推荐） #

不要直接使用裸iframe嵌入，给所有图表外层加基础容器，页面统一加载一次官方的高度监听脚本即可。该脚本通过iframe跨域通信主动获取每个图表的实时高度，和图表排列顺序、数量无关，响应式布局变化时也会自动更新高度，完全不需要手动设置断点。

嵌入代码示例：

<!-- 第1个图表嵌入 -->
<div style="width: 100%; min-height: 320px;">
  <iframe 
    id="datawrapper-chart-1" 
    src="对应图表的嵌入地址" 
    scrolling="no" 
    frameborder="0"
    style="width: 0; min-width: 100% !important; border: none;"
    height="0">
  </iframe>
</div>

<!-- 第2个图表嵌入，后续新增图表按相同格式写即可，不需要额外加样式 -->
<div style="width: 100%; min-height: 320px;">
  <iframe 
    id="datawrapper-chart-2" 
    src="对应图表的嵌入地址" 
    scrolling="no" 
    frameborder="0"
    style="width: 0; min-width: 100% !important; border: none;"
    height="0">
  </iframe>
</div>

<!-- 页面底部统一加载一次监听脚本，全页面所有图表通用 -->
<script>
!function(){"use strict";window.addEventListener("message",(function(e){if(void 0!==e.data["datawrapper-height"]){var t=document.querySelectorAll("iframe");for(var a in e.data["datawrapper-height"])for(var r=0;r<t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data["datawrapper-height"][a]+"px"}}}))}();
</script>

方案2：现有嵌入代码无改动兜底方案 #

如果已经完成大量图表嵌入，不想逐个修改嵌入结构，可以直接在全局加一段兜底脚本，自动监听所有Datawrapper图表的高度消息，自动适配高度，不需要修改任何现有嵌入代码：

// 全局监听图表主动上报的高度，自动匹配设置
window.addEventListener('message', function(e) {
  if (!e.data || typeof e.data['datawrapper-height'] !== 'object') return;
  const iframes = document.querySelectorAll('iframe[src*="datawrapper"]');
  const heightList = Object.values(e.data['datawrapper-height']);
  iframes.forEach(iframe => {
    if (iframe.contentWindow === e.source) {
      iframe.style.height = heightList[0] + 'px';
    }
  })
})

// 页面加载完成后触发所有图表重新上报高度，解决后加载图表高度不更新问题
window.addEventListener('load', () => {
  document.querySelectorAll('iframe[src*="datawrapper"]').forEach(iframe => {
    iframe.contentWindow.postMessage({ event: 'get-height' }, '*');
  })
})

方案优势 #

• 不需要手动测算任何视口断点，不管图表内容、布局规则怎么变，高度都会自动适配
• 一次配置后支持任意数量的Datawrapper图表嵌入，不需要为新增图表单独写样式
• 覆盖响应式布局切换场景，窗口大小变化时图表高度会自动同步更新，不会出现错位、留白或者内容截断问题

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