如何让iframe标签表现得像div 无滚动且不隐藏溢出内容

iframe是独立的嵌入浏览上下文，默认带固定尺寸、边框、内置滚动条，和普通div的块级渲染逻辑存在差异，要做到无滚动条、不隐藏溢出，按以下步骤处理即可：

1. 先重置iframe的默认样式 #

浏览器给iframe预设了很多默认样式，首先清掉这些默认属性，让它符合块级元素的基础表现：

iframe {
  display: block;
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

同时给iframe标签加上scrolling="no"属性，直接禁用浏览器内置的iframe滚动条。注意iframe不是空元素，不要写成自闭合形式，否则部分浏览器会出现解析错乱。

2. 解决高度自适应问题 #

普通div的高度是由自身内容撑开的，但iframe默认高度固定（多数浏览器默认150px），如果嵌入内容高度超过iframe设置值，就算禁用滚动条也会出现内容裁切，必须让iframe高度和嵌入内容的实际高度完全匹配，才能真正做到既不滚动也不隐藏溢出。

根据嵌入资源的来源不同，处理方式有区别：

• 嵌入同域资源：父页面可以直接读取iframe内部文档的高度，在iframe加载完成后动态赋值即可，参考代码：

const iframe = document.querySelector('iframe')
iframe.onload = function() {
  const doc = iframe.contentDocument || iframe.contentWindow.document
  iframe.style.height = doc.documentElement.scrollHeight + 'px'
}

如果iframe内部有异步加载内容、交互展开/折叠这类会改变高度的场景，加个变更监听，在内容高度变化时重新计算赋值就行。

• 嵌入跨域资源（比如第三方站点内容）：受浏览器同源策略限制，父页面没法直接读取iframe内部的内容高度，这种情况无法单靠父页面实现自适应，需要嵌入的目标站点主动通过postMessage接口把自身内容高度传递给父页面，父页面监听消息后更新iframe高度。如果目标站点没有做对应的通信适配，就没法实现完全无裁切、无滚动的效果。

修正后的完整代码参考 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
    }
    iframe {
      display: block;
      width: 100%;
      border: none;
      overflow: visible;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Some title</h1>
    <iframe src="demo.html" scrolling="no"></iframe>
  </div>
  <script>
    // 同域场景启用以下代码实现高度自适应
    // const iframe = document.querySelector('iframe')
    // iframe.onload = function() {
    //   const doc = iframe.contentDocument || iframe.contentWindow.document
    //   iframe.style.height = doc.documentElement.scrollHeight + 'px'
    // }

    // 跨域场景启用以下代码，监听目标站点传递的高度值
    // window.addEventListener('message', (e) => {
    //   if (e.data?.type === 'iframeHeight') {
    //     document.querySelector('iframe').style.height = e.data.value + 'px'
    //   }
    // })
  </script>
</body>
</html>

提示：如果是嵌入第三方站点且对方没有提供高度通信能力，是做不到和普通div完全一致的表现的，本质上iframe加载的是一个独立页面，和父页面的渲染上下文是隔离的。

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