zoukankan      html  css  js  c++  java
  • 实现iframe高度自适应

    iframe高度自适应使用场景是类似于微博,新闻等点击加载更多这种功能实现,要求iframe的高度能够跟随内容的变化而变化。

    父html文件,也就是引用ifram的文件
    src="blog/blog.display.html"  引用的文件
    id="blog-display" 全局唯一ID
    scrolling="no" 去除滚动条
    <iframe src="blog/blog.display.html" id="blog-display" scrolling="no" >
    </iframe>

    被引用的Html文件

    blog.display.html

    <html>
      <head>
        <script src="blog.display.js"></script>    
      </head>
        <body>
            <div id="content"></div>
            <body id="more-btn">加载更多</body>
        </body>
    </html>
    blog.display.js  
    注意这里使用的id(blog-display)为父iframe 中的 ID。
    就是将body的scrollHeight赋给父iframe 的高度height.
    $("#more-btn").click(function(){
       IFrameResize(); 
    var text = "<div stype='backgroung-clour:red; height:100px;'></div>"
      $("#content").append(text); }) function() IFrameResize(){
    //alert(this.document.body.scrollHeight); //弹出当前页面的高度 var obj = parent.document.getElementById("blog-display"); //取得父页面IFrame对象 //alert(obj.height); //弹出父页面中IFrame中设置的高度 obj.height = document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度 },


    showMore
  • 相关阅读:
    (C/C++学习笔记) 十四. 动态分配
    (C/C++学习笔记) 十三. 引用
    (C/C++学习笔记) 十二. 指针
    (C/C++学习笔记) 十一. 数组
    (C/C++学习笔记) 十. 函数
    (C/C++学习笔记) 九. 变量的存储类型
    (C/C++学习笔记) 八. 程序控制语句
    并发编程之多进程
    网络编程之Socket
    异常处理
  • 原文地址:https://www.cnblogs.com/lgjlife/p/10417759.html
Copyright © 2011-2022 走看看