iframe高度自适应的IE解决方案-阿里云开发者社区

iframe高度自适应的IE解决方案

2009-04-10 993

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 主页面main.html DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.

主页面main.html

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
     < title > New Document </ title >
</ head >
< body >
     < style type ="text/css" >
        .iframestyle
         {
            height : expression(1) ;
            aho : expression(autoResize()) ;
         }
     </ style >

     < script type ="text/javascript" >
         function autoResize() {
             try {
                document.getElementById( " frm1 " ).style.height = window.frames[ " frm1 " ].document.body.scrollHeight;
            }
             catch (e) { }
        }
     </ script >

    iframe之前的文字 < hr />
     < iframe name ="frm1" src ='frm.html' marginwidth ="0" marginheight ="0" frameborder ="0" scrolling ="no" width ="100%" class ="iframestyle" id ="frm1" ></ iframe >
     < hr /> iframe之后的文字

</ body >
</ html >

框架子页frm.html

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
     < title > New Document </ title >
</ head >
< body >

     < script language ="JavaScript" type ="text/javascript" >
         function fnShort() {
            document.getElementById( " diva " ).innerHTML = ' <br />iframe变短<br /> ' ;

        }

         function fnLong() {

            document.getElementById( " diva " ).innerHTML = ' <br />iframe变长<br />iframe变长<br />iframe变长<br />iframe变长<br />iframe变长<br />iframe变长<br />iframe变长<br />iframe变长<br />iframe变长<br /> ' ;

        }
     </ script >

     < a href ="#" onclick ="fnShort();" > iframe变短 </ a > < a href ="#" onclick ="fnLong();" > iframe变长 </ a >
     < div id ="diva" >
         < br />
        iframe变长 < br />
        iframe变长 < br />
        iframe变长 < br />
        iframe变长 < br />
        iframe变长 < br />
        iframe变长 < br />
        iframe变长 < br />
        iframe变长 < br />
        iframe变长 < br />
     </ div >

     < a href ="frm2.html" > 转到一个新的页面 </ a >
</ body >
</ html >

子页面2: frm2.html

在IE8上失效(不过IE8上可以通过设置源代码的Meta，让IE8以兼容性视图浏览，也算是一种IE8下的解决办法)

iframe高度自适应的IE解决方案

热门文章

最新文章

相关电子书

相关实验场景