精华内容
参与话题
问答
  • iframe自适应高度

    2018-01-10 14:56:25
    iframe自适应高度 $('id').load(function() { //iframe自适应 var iframeHeight=$(this).contents().height(); $(this).height(iframeHeight+'px'); if (iframeHeight != 0){ window.parent.modalh

    iframe自适应高度

    $('id').load(function() { //iframe自适应  
        var iframeHeight=$(this).contents().height();  
        $(this).height(iframeHeight+'px');   
        if (iframeHeight != 0){
         window.parent.modalhide();
        }
    });  
    展开全文
  • iframe自适应高度,多层嵌套iframe自适应高度的解决方法 在页面无刷新更新方面,虽然现在的ajax很强悍,但是处理代码相对多点。想比之下,iframe就简单多了!处理iframe的自适应宽、高,会经常用到,网上整理了一份...

    iframe自适应高度,多层嵌套iframe自适应高度的解决方法

    在页面无刷新更新方面,虽然现在的ajax很强悍,但是处理代码相对多点。想比之下,iframe就简单多了!处理iframe的自适应宽、高,会经常用到,网上整理了一份,写在这里备用:

    单个iframe 高度自适应:

    <iframe id="iFrame1" name="iFrame1" width="100%" οnlοad="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm"></iframe>

    起作用的是这句:οnlοad="this.height=iFrame1.document.body.scrollHeight"

    多层嵌套iframe 高度自适应:
    A页面的iframe:
    <iframe id="frame_content" src=”B.php“ name="right" width="1003" frameborder="0" scrolling="no" ></iframe>

    B.php页面又有一个iframe:
    <iframe width="750" name="rightform" id="rightform" src="KinTimMng_right_init.php" frameborder="0" scrolling="no" οnlοad="this.height=rightform.document.body.scrollHeight;parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px';" ></iframe>

    起作用的代码是这句:οnlοad="this.height=rightform.document.body.scrollHeight;parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px';"

    onload的时候执行了两条js语句:

    1、设置当前iframe自己的高度自适应
    this.height=rightform.document.body.scrollHeight  

    2、设置父iframe的高度自适应(注意后面的高度单位px,如果不加单位,firefox下不起作用)
    parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px'

    以上代码在ie6、ie7、ie8、firefox3.5下测试通过



    最后使用的代码,嵌套iframe,子iframe加载页面,实现父子iframe高度自适应。 (已验证过可以,在ie和firefox中)

    <!-- 右边显示区 -->
                        <td width="730">
                           <script type="text/javascript" language="javascript">
                                //子iframe中刷新src,要求子iframe高度变,父iframe也要变。否则不会自动高度自适应   
                                //此函数用在子iframe所在页面中。
                                function iframeautoheight_childframe(childframe_id,parentframe_id)
                                {   
                                    try
                                    {
                                        alert('child' + "," + childframe_id + "," + parentframe_id);
                                        var childframe_obj=document.getElementById(childframe_id);
                                        var parentframe_obj=parent.document.getElementById(parentframe_id);
                                        alert(childframe_obj + "," + parentframe_obj);
                                        //获取iframe的documnet!!!  为了判断iframe内页面的实际高度,必须获取!!!!。
                                        //ie6,7用的是document.frames['iframepage_sub'].document
                                        //ie8,firefox用的是childframe_obj.contentDocument

                                        var childframedocument_obj= document.frames ? document.frames['iframepage_sub'].document : childframe_obj.contentDocument;
                                        var parentframedocument_obj=parent.document.frames ? parent.document.frames['iframepage'].document : parentframe_obj.contentDocument;
                                        //alert(childframedocument_obj + "," + parentframedocument_obj);
                                        //设置子iframe的高度                                  
                                        childframe_obj.height=300;  //复位一下,否则可能不刷新。
                                        childframe_obj.height=childframedocument_obj.body.scrollHeight;  //子frame页面内容的高度
                                        //alert();
                                        //设置父iframe的高度
                                        //更改子iframe的src后,必须更改父iframe的height
                                        parentframe_obj.height=300;
                                        parentframe_obj.height=parentframedocument_obj.body.scrollHeight;
                                    }catch(e){alert(e.message);}
                                }
                            </script>
                            <iframe id="iframepage_sub" name="iframepage_sub" src="xygk_xxjj.htm" frameBorder=0 scrolling=no width="730"  onLoad="iframeautoheight_childframe(this.id,'iframepage');"></iframe>
                        </td>


    不嵌套iframe,单独iframe的成功示例:

            <div>
                <script type="text/javascript" language="javascript">   
                    function iFrameHeight() {   
                    var ifm= document.getElementById("iframepage");
                    //必须获取iframe的document,才能得到iframe页面内的内容高度。  
                    //ie6,ie7document.frames["iframepage"].document
                    //ie8,firefox用的是ifm.contentDocument
                    var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;   
                    if(ifm != null && subWeb != null) {
                       ifm.height=0;
                       ifm.height = subWeb.body.scrollHeight;
                    }   
                    }   
                </script>      
                <table width="100%"><tr>
                    <td style="width:15px;">&nbsp;</td>
                    <td>
                        <!-- iframe左边空15px,是为了和大图配合,大图左边留白了15px -->
                        <iframe src="main.htm" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="1002px" onLoad="iFrameHeight();" >
                        </iframe>
                    </td>
                    <td style="width:11px;">&nbsp;</td>
                </tr></table>
            </div>

    展开全文
  • iframe 自适应高度

    2019-04-10 01:08:40
    NULL 博文链接:https://wang371134086.iteye.com/blog/1665645
  • Iframe自适应高度

    2012-08-07 09:05:37
    Iframe自适应高度 //IFrame自动适应屏幕 function iFrameHeight() { var ifm= document.getElementById("mainFrame"); var subWeb = document.frames ? document.frames["mainFrame"].document :

    Iframe自适应高度


    <iframe src="home.jsp"  frameborder=0 width="970"  scrolling="no" name="mainFrame" align="center"  onLoad="iFrameHeight();"> </iframe>



    //IFrame自动适应屏幕
    function iFrameHeight() {   
    var ifm= document.getElementById("mainFrame");   
    var subWeb = document.frames ? document.frames["mainFrame"].document : 


    ifm.contentDocument;   
    if(ifm != null && subWeb != null) {
      ifm.height = subWeb.body.scrollHeight;
    }   
    }   
    展开全文
  • iFrame 自适应高度

    2013-06-22 17:46:34
    经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。 &lt;iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder...

    经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。

    <iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>

     javascript代码:

    <script type="text/javascript" language="javascript">   
    	function iFrameHeight() {   
    		var ifm= document.getElementById("iframepage");   
    		var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;   
    		if(ifm != null && subWeb != null) {
    		   ifm.height = subWeb.body.scrollHeight;
    		}   
    	}   
    </script>

     

    展开全文

空空如也

1 2 3 4 5 ... 20
收藏数 2,552
精华内容 1,020
关键字:

iframe自适应高度