WordPress中iframe响应式适配及高度设置问题求助

一、纯CSS实现响应式+固定宽高比 #

这是最稳定的无JS方案，通过容器的百分比内边距来维持iframe的宽高比例，同时实现宽度自适应：

<div class="responsive-iframe-wrap" style="width: 100%; max-width: 800px; margin: 0 auto; position: relative;">
  <!-- 调整padding-top值控制高度比例：16:9对应56.25%，4:3对应75%，也可设为固定值如500px -->
  <div style="padding-top: 75%; position: relative;"></div>
  <iframe src="你的实际链接" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" scrolling="no"></iframe>
</div>

核心说明： #

• max-width:800px对应你原代码中的data-width-iframe="800"，限制大屏下的最大宽度
• 若需要固定高度，把内层div的padding-top替换为固定数值（如500px），iframe会自动占满容器高度

二、动态适配内容高度（JS方案） #

如果iframe内的内容高度不固定，可通过JS动态获取内部高度并同步（需注意跨域限制）：

1. 先添加基础CSS（可放到WordPress「外观→自定义→额外CSS」）：

.responsive-iframe-wrap {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.responsive-iframe-wrap iframe {
  width: 100%;
  border: 0;
}

2. 添加JS代码（放到WordPress自定义JS区域或主题footer.php）：

// 监听iframe加载完成事件
document.getElementById('responsiveIframe4').addEventListener('load', function() {
  try {
    // 获取内部文档的实际高度
    const contentHeight = this.contentDocument.body.scrollHeight;
    // 设置iframe高度
    this.style.height = contentHeight + 'px';
  } catch (e) {
    // 跨域时无法获取内容高度， fallback到固定高度
    this.style.height = '600px';
  }
});

注意： #

• 若iframe指向外部域名，浏览器的同源策略会阻止获取内部高度，此时只能使用固定高度方案，或与目标域名配合通过postMessage传递高度值

三、极简固定高度响应式版本 #

如果只需要固定高度+宽度自适应，直接用这个简化代码：

<div style="width: 100%; max-width: 800px; margin: 0 auto; height: 600px;">
  <iframe src="你的实际链接" style="width: 100%; height: 100%; border: 0;" scrolling="no"></iframe>
</div>

内容的提问来源于stack exchange，提问作者Dragoș Axinte