如何让嵌入Reddit帖子的iframe实现100%宽度+自适应高度的响应式效果？

问题分析 #

直接给iframe设置height:auto无法自适应内部内容，核心原因是浏览器同源策略限制了跨域iframe的DOM访问，无法直接读取内部内容的真实高度。另外你给两个iframe使用了同一个id="reddit-embed"，这违反HTML规范（ID必须唯一），会导致后续样式或脚本操作失效。

解决方案 #

方案1：使用Reddit官方嵌入代码（推荐） #

Reddit提供的官方嵌入方案会自动处理高度自适应和响应式布局，无需手动调整iframe样式，步骤如下：

1. 移除现有自定义iframe，替换为对应帖子的官方嵌入代码（在Reddit帖子页面点击「分享」→「嵌入」即可获取）
2. 引入Reddit嵌入平台脚本

示例代码：

<div id="container">
  <div id="body">
    <!-- 第一个帖子的官方嵌入代码 -->
    <blockquote class="reddit-card" data-card-created="1670845200">
      <a href="https://www.reddit.com/r/WhitePeopleTwitter/comments/ymji0q/oooooffff/">oooooffff</a> from 
      <a href="https://www.reddit.com/r/WhitePeopleTwitter/">r/WhitePeopleTwitter</a>
    </blockquote>
    <!-- 第二个帖子的官方嵌入代码 -->
    <blockquote class="reddit-card" data-card-created="1670845300">
      <a href="https://www.reddit.com/r/funny/comments/ymkbo8/mountain_lion_wins_his_favourite_toy_in_the_shell/">Mountain lion wins his favourite toy in the shell game</a> from 
      <a href="https://www.reddit.com/r/funny/">r/funny</a>
    </blockquote>
  </div>
</div>
<script async src="https://embed.redditmedia.com/widgets/platform.js" charset="UTF-8"></script>

你的现有CSS代码无需修改，官方脚本会自动生成适配的iframe，并动态调整高度以完整显示内容。

方案2：手动监听消息动态调整iframe高度 #

若坚持使用自定义iframe，可通过监听Reddit嵌入页面发送的message事件来设置高度：

1. 给每个iframe设置唯一ID（如reddit-embed-1、reddit-embed-2）
2. 添加JavaScript监听消息，提取高度值并更新对应iframe

示例代码：

<div id="container">
  <div id="body">
    <iframe id="reddit-embed-1" src="https://www.redditmedia.com/r/WhitePeopleTwitter/comments/ymji0q/oooooffff/?ref_source=embed&ref=share&embed=true" sandbox="allow-scripts allow-same-origin allow-popups" style="border: none; width:100%" scrolling="no"></iframe>

    <iframe id="reddit-embed-2" src="https://www.redditmedia.com/r/funny/comments/ymkbo8/mountain_lion_wins_his_favourite_toy_in_the_shell/?ref_source=embed&ref=share&embed=true" sandbox="allow-scripts allow-same-origin allow-popups" style="border: none; width:100%" scrolling="no"></iframe>
  </div>
</div>

<script>
window.addEventListener('message', function(e) {
  // 验证消息来源为Reddit嵌入页面
  if (e.origin.startsWith('https://www.redditmedia.com')) {
    try {
      const data = JSON.parse(e.data);
      if (data.type === 'resize' && data.id) {
        const targetIframe = document.getElementById(data.id);
        if (targetIframe) {
          targetIframe.style.height = `${data.height}px`;
        }
      }
    } catch (err) {
      // 解析失败时忽略
    }
  }
});
</script>

注意：需确保iframe的ID与Reddit发送的消息中data.id字段匹配，若不匹配，可通过消息中的url字段判断对应iframe。

额外注意事项 #

• 每个HTML元素的ID必须唯一，避免重复ID导致样式或脚本失效
• 移除scrolling="yes"，设置scrolling="no"以避免出现滚动条
• 官方嵌入方案稳定性更高，Reddit内部结构调整时无需手动适配

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