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

    转自: http://www.cnblogs.com/luluping/archive/2009/04/17/1437843.html

    超级简单的方法,也不用写什么判断浏览器高度、宽度啥的。
    下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。
    注意别放错地方了哦。



    iframe代码,注意要写ID


    <iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

    jquery代码1:

    //注意:下面的代码是放在test.html调用
    $(window.parent.document).find("#main").load(function(){
    var main = $(window.parent.document).find("#main");
    var thisheight = $(document).height()+30;
    main.height(thisheight);
    });


    jquery代码2:

    //注意:下面的代码是放在和iframe同一个页面调用
    $("#main").load(function(){
    var mainheight = $(this).contents().find("body").height()+30;
    $(this).height(mainheight);
    }); 

    测试过,第二种有效,不过要注意一点是,增加的JS要写在iframe下面,放在头部是测试没有效果。
    测试代码:

                    <iframe id="mainframe" name="mainframe" marginwidth="0" marginheight="0" src="/Home/Activitylist"
                        frameborder="0" width="100%" scrolling="no" height="100%"></iframe>
                    <script type="text/javascript">
                        //注意:下面的代码是放在和iframe同一个页面调用,放在iframe下面
                        $("#mainframe").load(function () {
                            var mainheight = $(this).contents().find("body").height() + 30;
                            $(this).height(mainheight);
                        });
                    </script>
    
  • 相关阅读:
    css区分ie6,7,ff
    轮播插件--可支持视频拖拽和可视区播放
    json无限树----几个月前写的插件
    WEBGL学习笔记二
    记录一些坑
    webGL学习笔记一
    Angular模态框
    Angular指令实践之type等于text的input星号输入
    Angular内置指令
    Angular指令一
  • 原文地址:https://www.cnblogs.com/jys509/p/3375743.html
Copyright © 2011-2022 走看看