JS - iframe 高度自适应内容

iframe 内容加载后不改变

使用：

onload="this.height=this.contentWindow.document.documentElement.scrollHeight"

例如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>自适应高度</h1>
  <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>

  <h1>非自适应高度</h1>
  <iframe srcdoc='<div style="height: 400px;width: 400px;background: #ddd;"></div>' frameborder="1" scrolling="no" width="100%"></iframe>
</body>
</html>

iframe 内容加载后改变

定时改变 iframe 高度：

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

例如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>自适应高度</h1>
  <iframe srcdoc='<button onclick="this[xss_clean].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>

  <h1>非自适应高度</h1>
  <iframe srcdoc='<button onclick="this[xss_clean].appendChild(this.cloneNode())" style="width: 100px; height: 100px;display: block;"></button>' frameborder="1" scrolling="no" width="100%"></iframe>
  <script>
    setInterval(()=>{
      document.querySelector('iframe').height = window.frames[0].document.documentElement.scrollHeight;
    }, 200);
  </script>
</body>
</html>

上一篇：玩转CSS媒体查询@media，轻松实现响应式设计

下一篇：pre自动换行

JS - iframe 高度自适应内容

JS - iframe 高度自适应内容

iframe 内容加载后不改变

iframe 内容加载后改变

相关内容

热门资讯