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>
    
  • 相关阅读:
    HTTP 无法注册 URL http://+:xxxxx/ServicesName/。进程不具有此命名空间的访问权限
    C语言中宏的一些特别用法
    static和const的比较和解释
    堆和栈的区别
    c++中const用法
    链表常见笔试题
    自绘实现半透明水晶按钮 .
    C++面试题
    C/C++面试题大汇总
    C++ 值传递、指针传递、引用传递详解
  • 原文地址:https://www.cnblogs.com/jffun-blog/p/12046208.html
Copyright © 2011-2022 走看看