JS iframe 高度自适应内容

更新于 2020-02-11写于 2020-02-11前端JavaScript

iframe：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe

iframe 内容加载后不改变

使用：onload="this.height=this.contentWindow.document.documentElement.scrollHeight"

例如：

html

 1<!DOCTYPE html>
 2<html lang="zh-CN">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>Document</title>
 6</head>
 7<body>
 8  <h1>自适应高度</h1>
 9  <iframe srcdoc='<div style="height: 400px;width: 400px;background: #ddd;"></div>' frameborder="1" scrolling="no" width="100%" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
10
11  <h1>非自适应高度</h1>
12  <iframe srcdoc='<div style="height: 400px;width: 400px;background: #ddd;"></div>' frameborder="1" scrolling="no" width="100%"></iframe>
13</body>
14</html>

iframe 内容加载后改变

定时改变 iframe 高度：

1setInterval(()=>{
2  document.querySelector('iframe').height = window.frames[0].document.documentElement.scrollHeight;
3}, 200);

例如：

html

 1<!DOCTYPE html>
 2<html lang="zh-CN">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>Document</title>
 6</head>
 7<body>
 8  <h1>自适应高度</h1>
 9  <iframe srcdoc='<button onclick="this.parentNode.appendChild(this.cloneNode())" style="width: 100px; height: 100px;display: block;"></button>' frameborder="1" scrolling="no" width="100%" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
10
11  <h1>非自适应高度</h1>
12  <iframe srcdoc='<button onclick="this.parentNode.appendChild(this.cloneNode())" style="width: 100px; height: 100px;display: block;"></button>' frameborder="1" scrolling="no" width="100%"></iframe>
13  <script>
14    setInterval(()=>{
15      document.querySelector('iframe').height = window.frames[0].document.documentElement.scrollHeight;
16    }, 200);
17  </script>
18</body>
19</html>