iframe內容自適應高度

時間  2019-12-02
標籤 iframe 內容 自適應 高度 欄目 HTML 简体版
原文   原文鏈接 
一直以爲要用JS才能實現iframe高度的自適應，其實CSS也能夠，並且實現的更好，只是須要給包裹iframe的DIV設置個高度，而後讓irame高度設置成100%就能夠自適應了。

完美版Iframe自適應高度====>推薦使用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>iframe高度自適應</title>
<style>
  *{margin:0; padding:0;}
  html,body{height:100%;}
  .header{width: 100%;height:50px;background: #11c1f3; }
  .container{padding:0 0 0 200px;overflow: hidden;}
  .container .main{position:absolute; width:auto; height:auto; top:50px; left:200px; right:0; bottom:0; overflow:hidden;}
  .container .left{width:200px; height:auto;  background:#ef473a; position:absolute; left:0; top:50px; bottom:0; overflow: auto;}
</style>
</head>
<body>

<div class="header">頂部導航區域...</div>
<div class="container">
  <div class="main">
    <iframe class="mainFrame" src="http://www.cnblogs.com/leyi" width="100%" height="100%" frameborder="0"></iframe>
  </div>
  <div class="left">左側導航區域...</div>
</div>
</body>
</html>

 

 table版Iframe自適應高度打造高度自適應的後臺佈局框架=====> 

<style>
    *{ margin:0; padding:0}
    body, html{ height:100%; width:100%; overflow:hidden;} /*這個高度很重要*/
    #frametable .header{ height:40px; background:#ddd; border-bottom:2px solid #999;}
    #frametable .left{ width:150px; border-right:2px solid #999; background:#ddd; height:100%;}
</style>

<table id="frametable" cellpadding="0" cellspacing="0" width="100%" height="100%" style="width: 100%;">
    <tr>
        <td colspan="2" height="40">
            <div class="header">
                <!-- header menu -->
            </div>
        </td>
    </tr>
    <tr>
        <td valign="top" width="150" height="100%"> <!--這個高度很重要-->
            <div class="left"><!-- left menu --></div>
        </td>
        <td valign="top" width="100%" height="100%"> <!--這個高度很重要-->
            <iframe id="iframe" name="main" src="http://www.baidu.com" width="100%" allowtransparency="true" width="100%" height="100%" frameborder="0" scrolling="yes" style="overflow:visible;"></iframe>
        </td>
    </tr>
</table>

 

    

操做iframe=====>

    contentWindow //全部瀏覽器都支持的
    contentDocument //ie 6 7 不支持
    document.getElementById('iframe_id').contentWindow.document.getElementById('子頁面元素節點');
    window.parent  //子frame操做父級頁面
    window.parent.document.getElementById('父頁面元素節點').style.cssText=..
    window.top //獲取最頂層一級頁面
    window.top.document.getElementById('最頂層頁面元素節點').style.cssText=..
    //防止被嵌套：
    if(window!=window.top){
        window.top.location.href=window.location.href
    }

 

iframe的傳值方式=====>
一、jsonp
二、localstorage
三、postMessage
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程