zoukankan      html  css  js  c++  java
  • JS

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

    iframe 内容加载后不改变

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

    例如:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <h1>自适应高度</h1>
      <iframe srcdoc='<div style="height: 400px; 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; 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 lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <h1>自适应高度</h1>
      <iframe srcdoc='<button onclick="this.parentNode.appendChild(this.cloneNode())" style=" 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.parentNode.appendChild(this.cloneNode())" style=" 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>
    
  • 相关阅读:
    vue 客户端渲染和服务端渲染
    js 数组对象深拷贝
    vue template标签
    vue watch的高级用法
    js对象数组去重
    移动端触发touchend后阻止click事件
    重读JS(四)数据类型、作用域和内存问题
    重读JS(三)基本概念
    vue项目
    [vue问题解决]vue <router-link>在浏览器上点击失效(路由不跳转)
  • 原文地址:https://www.cnblogs.com/jffun-blog/p/12046208.html
Copyright © 2011-2022 走看看