Html:同域iFrame自适应高度

Html:同域iFrame自适应高度

兼容IE6, Firefox, Safari, Opera.

只支持同域的iFrame,不支持跨域



方法一: 使用jquery插件: 

From: http://www.lost-in-code.com/programming/jquery-auto-iframe-height/

http://www.lost-in-code.com/wp-content/projects/auto-iframe-height/jquery.autoheight.js


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


<html>

<head>

    <title>Auto iFrame Height</title>

    

    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript" src="js/jquery.autoheight.js"></script>

</head>

<body>

    <div align="center">

        <h1>Auto iFrame Height</h1>

        

        <iframe class="autoHeight" width="100%" frameborder="0" scrolling="no" src="2col.html"></iframe>

    </div>

</body>

</html>



方法二: 

From: http://www.javaeye.com/topic/839143


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<title>iFrame auto height</title>


<script src="js/jquery.js"></script>

<script type="text/javascript">

function  heightSet(frameId, frameName){

    // FF和IE必须要通过iframe的名字去得到内部页面高度,而其他浏览器则可以用this或ID

    if($.browser.mozilla || $.browser.msie) {

        bodyHeight =window.frames[frameName].document.body.scrollHeight;

    }else{

        bodyHeight = document.getElementById(frameId).contentWindow.document.documentElement.scrollHeight;

    }

    

    document.getElementById(frameId).height = bodyHeight;  

}


</script>

</head>


<body>


<iframe id="mainFrame" name="mainFrame" frameborder="0"  scrolling="no" src="2col.html" onload="heightSet('mainFrame', 'mainFrame')"></iframe>

</body>

</html>

 

你可能感兴趣的:(Html:同域iFrame自适应高度)