如何修改嵌入代码实现iframe自适应内容并隐藏滚动条

一、基础修改（彻底隐藏滚动条） #

先调整样式和属性，确保两种滚动条完全不可见：

<div style="border: 1px solid red; width: 70px; overflow: hidden;">
  <iframe 
    src="https://xxxxx.aspx" 
    style="width: 100%; border: none; overflow: hidden; scrollbar-width: none;"
    scrolling="no"
    frameborder="0"
  ></iframe>
</div>

• 给iframe添加scrolling="no"属性，兼容旧浏览器隐藏滚动条
• 用scrollbar-width: none适配火狐浏览器，彻底隐藏滚动条
• 外层容器去掉固定height:20px，避免限制内容展示；iframe设width:100%防止超出容器范围

二、自动调整尺寸（同域场景） #

如果iframe的源和当前页面同域（域名、协议、端口一致），可以通过JS监听内容高度变化，自动适配iframe尺寸：

<div style="border: 1px solid red; width: 70px; overflow: hidden;">
  <iframe 
    id="autoSizeIframe"
    src="https://xxxxx.aspx" 
    style="width: 100%; border: none; overflow: hidden; scrollbar-width: none;"
    scrolling="no"
    frameborder="0"
  ></iframe>
</div>

<script>
const iframe = document.getElementById('autoSizeIframe');
// 页面加载完成后初始化高度
iframe.onload = function() {
  const contentHeight = iframe.contentWindow.document.body.scrollHeight;
  iframe.style.height = contentHeight + 'px';
  
  // 监听内容动态变化，实时调整高度
  iframe.contentWindow.addEventListener('resize', function() {
    const newHeight = iframe.contentWindow.document.body.scrollHeight;
    iframe.style.height = newHeight + 'px';
  });
};
</script>

<!-- 适配Chrome/Edge/Safari等webkit内核浏览器隐藏滚动条 -->
<style>
#autoSizeIframe::-webkit-scrollbar {
  display: none;
}
</style>

• 给iframe添加ID，方便JS定位元素
• 通过onload事件获取内容实际高度，设置iframe的高度属性
• 监听内容窗口的resize事件，应对内容动态更新的场景

三、跨域场景说明 #

如果iframe是跨域（域名、协议、端口任意一项不同），浏览器同源策略会阻止JS访问iframe内部内容，无法直接获取高度。可采用两种替代方案：

• 联系iframe页面的开发者，通过postMessage接口传递内容高度给父页面，父页面接收后调整iframe高度
• 预估内容最大高度，给iframe设置固定高度，同时保留上述隐藏滚动条的配置

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