支持html5的iframe框架兼容版本 (不支持ie6,ie7)

支持html5的iframe框架兼容版本 (不支持ie6,ie7)_第1张图片 

缩小时界面尺寸不会有变化, 似乎是css固定了, 不过放大时, 尺寸会随之更改.
在ie8+, ff, Chrome 上测试成功.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframe HTML5</title>
<style type="text/css">
    *{padding: 0px; margin: 0px;}
    html,body,table{width: 100%; height: 100%; overflow: hidden;}
    table{border-collapse: collapse;}
    td{border: 1px solid #0080FF;}
</style>

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

<script type="text/javascript">
    $(function(){
        iframe_onresize();
        window.onresize=iframe_onresize;
    })
    
    function iframe_onresize(){
        var h = $('#if').height();
        $('iframe').css('height',h+'px');
        $('.th_note').text('height: '+h+'px');
    }
    
</script>

</head>

<body style="background-color: #F9FBF4;">
<table>
    <tr><td colspan="2"  style="height:30px;">100% X 30PX  iframe: <span class="th_note"></span></td></tr>
    
    <tr><td style="width: 100px;" onclick="chss()">LEFT 100PX</td>
    
    <td id="if" style="background-color:red;">
        <iframe name="main" style="border: none; display: block; height: 100%; width: 100%; overflow-y: scroll;" src=http://www.baidu.com/></iframe>
    </td>
    
    </tr>
    <tr><td colspan="2" style="height:30px;">100% X 30PX</td></tr>
</table>

</body>
</html>

请自行替换自己的jquery.js路径. 即可.


求高人兼容ie6, ie7.

你可能感兴趣的:(支持html5的iframe框架兼容版本 (不支持ie6,ie7))