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
  • 相关阅读:
    K
    士兵队列训练问题
    分析A + B Problem II
    C++中sort()的用法
    swing初级应用创建一个窗体
    java生成随机数
    JAVA数字格式化
    CodeForces
    POJ
    51Nod
  • 原文地址:https://www.cnblogs.com/lgjlife/p/10417759.html
Copyright © 2011-2022 走看看