zoukankan      html  css  js  c++  java
  • iframe自适应及offsetHeight/Width+scrollHeight/Width区别

    offsetHeight, offsetWidth:返回元素的高度和宽度,以像素为单位。scrollHeight, scrollWidth:返回元素的完整的高度和宽度,以像素为单位。当一个元素拥有滚动条时(比如由于CSS的 overflow 属性),这些属性和offsetHeight与offsetWidth不同,offsetHeight 和 offsetWidth 只是报告元素的可见部分的大小。 参考:http://www.w3school.com.cn/xmldom/dom_htmlelement.asp

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>iframe</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <script type="text/javascript">
    //iframe高度自适应
    function IFrameReSize(iframename) {
      
    var pTar = document.getElementById(iframename);
      
    if (pTar) {//ff
       if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
       pTar.height
    = pTar.contentDocument.body.offsetHeight;
       }
    elseif (pTar.Document && pTar.Document.body.scrollHeight) {//ie
       pTar.height = pTar.Document.body.scrollHeight;
       }
       }
       }
      
    //iframe宽度自适应
      function IFrameReSizeWidth(iframename) {
      
    var pTar = document.getElementById(iframename);
      
    if (pTar){//ff
       if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth) {
       pTar.width
    = pTar.contentDocument.body.offsetWidth;
       }
    elseif (pTar.Document && pTar.Document.body.scrollWidth){//ie
       pTar.width = pTar.Document.body.scrollWidth;
       }
       }
      }
    </script>
    </head>
    <body>
    <iframe src="includ.html" scrolling="no" frameborder="1" height="100%" id="mainFrame" width="100%" onload='IFrameReSize("mainFrame");IFrameReSizeWidth("mainFrame");'></iframe>
    </body>
    </html>
  • 相关阅读:
    JQ选择器
    设计模式
    招银网络面试
    斗鱼面经
    招银科技面经
    用户访问网站基本流程
    shell的条件判断
    crontab -e 和/etc/crontab的区别
    秘钥对登录配置
    CentOS6 x86_64最小化安装优化脚本
  • 原文地址:https://www.cnblogs.com/wen12128/p/2005535.html
Copyright © 2011-2022 走看看