如何嵌入外部站点iFrame仅展示指定CSS板块并解决响应式适配问题

实现方案说明 #

受浏览器同源策略限制，你无法直接操作跨域iframe内部的DOM元素，也不能调用或修改被嵌入站点的CSS规则，因此无法通过直接选中目标元素的方式仅展示疫情数字板块。你当前使用的「外层容器溢出隐藏+iframe负偏移裁剪」是无站点权限前提下的唯一可行方案，以下是修复响应式问题的优化实现：

优化后代码

<div id="divContainer" style="width: 100%; max-width: 790px; margin: 90px auto 0;">
  <div id="frameContainer" style="width: 100%; aspect-ratio: 790 / 500; overflow: hidden; position: relative;">
    <iframe 
      src="https://www.worldometers.info/coronavirus/" 
      scrolling="no" 
      style="position: absolute; top: -300px; left: 0; width: 1200px; height: 1800px; border: none;"
    >
    </iframe>
  </div>
</div>

优化点说明

• 移除固定像素的位置限制，外层容器设置最大宽度，可适配不同尺寸的终端屏幕
• 使用aspect-ratio固定裁剪区域的宽高比，避免页面缩放时内容错位偏移
• 给iframe设置足够大的固定宽高，避免目标站点响应式布局触发导致数字板块位置变化

注意：该方案强依赖目标站点的现有页面结构，若对方后续调整数字板块位置、页面布局规则，你需要同步调整iframe的偏移值和宽高参数。若需要更稳定的展示效果，建议直接对接公开疫情数据接口自行渲染页面，可完全规避广告、布局错位等问题。

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