zoukankan      html  css  js  c++  java
  • 根据屏幕分辨率自适iframe的高度

    关于clientHeight、offsetHeight、scrollHeight 属性:

    属性
    关于clientHeight、offsetHeight、scrollHeight 
    
    window.screen.availWidth      返回当前屏幕宽度(空白空间)  
    window.screen.availHeight     返回当前屏幕高度(空白空间)  
    window.screen.width           返回当前屏幕宽度(分辨率值)  
    window.screen.height          返回当前屏幕高度(分辨率值)  
    window.document.body.offsetHeight;     返回当前网页高度  
    window.document.body.offsetWidth;     返回当前网页宽度  
    我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。 
    
    这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。 
    clientHeight 
    大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。 
    
    offsetHeight 
    IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 
    NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。 
    
    scrollHeight 
    IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。 
    NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。 
    
    简单地说 
    clientHeight 就是透过浏览器看内容的这个区域高度。 
    NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。 
    IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。 
    
    同理 
    clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

    JavaScript:

    JavaScript
     1 <script type="text/javascript">
     2         function dyniframesize(down) {
     3             var pTar = null;
     4             if (document.getElementById) {
     5                 pTar = document.getElementById(down);
     6             }
     7             else {
     8                 eval('pTar = ' + down + ';');
     9             }
    10             if (pTar && !window.opera) {
    11                 //begin resizing iframe 
    12                 pTar.style.display = "block";
    13                 if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
    14                     //ns6 syntax 
    15                     pTar.height = document.body.offsetHeight - 120;
    16                     pTar.width = document.body.scrollWidth + 0;
    17                 }
    18                 else if (pTar.Document && pTar.Document.body.scrollHeight) {
    19                     //ie5+ syntax 
    20                     pTar.height = document.body.offsetHeight - 120;
    21                     pTar.width = pTar.Document.body.scrollWidth;
    22                 }
    23             }
    24         } 
    25     </script>

    iframe调用:

    调用
    1  <iframe class="main_iframe" id="frmright" onload="javascript:dyniframesize('frmright');"
    2                         name="frmright" src="Admin_SiteInfo.aspx" frameborder="0" scrolling="yes"></iframe>
  • 相关阅读:
    《汇编语言》(王爽)课后答案
    宝石迷阵-2019头条笔试题
    变量名拆分 -头条2019笔试题
    幸存者游戏, 数字对生成树, 飞机最低可俯冲高度,整理书架 -paypal笔试题2019
    括号序列, 避嫌抢劫-拼多多笔试题
    趣味字母卡片-拼多多笔试题
    爱健身的小王, 修改矩阵,最长上升子串 -美团2019笔试题
    机器人跳跃问题和毕业旅行-头条2019笔试题
    特征提取-头条2019笔试题
    疏散人群-京东2019笔试题
  • 原文地址:https://www.cnblogs.com/Setme/p/2528697.html
Copyright © 2011-2022 走看看