利用JAVASCRIPT让IFRAME框架的高度自适应

开拖la机进城

开拖la机进城

2016-02-19 20:31

下面这个利用JAVASCRIPT让IFRAME框架的高度自适应教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

  页面内嵌不同的网页内容时,导致iframe的高度无法与实现内容或浏览器高度相匹配。窗口大小变换时,不能iframe不能进行自动调整。这里,我们利用JAVASCRIPT让IFRAME框架的高度自适应。

  首先,写出如下的JS方法。

/**
 * 内嵌页面的高度设置
 */
function handleFrameLoad() {
 var hDoc = getBodyHeight(document);
 var tblmain =  document.getElementById('tblMain');
 var mFrame = window.mainFrame;
 var hFrameDoc = getFrameHeight(mFrame);
 var hTable = hDoc-80; //减去该页面除iframe外其他控件所占的高度.
 if(hFrameDoc hTable) hTable = hFrameDoc;
 tblmain.style.height = hTable;
 mFrame.height = hTable;
 if(window.mainFrame.moduleRight != null){
    //表示该内嵌页,包含内嵌的页面,页iframe的id固定为moduleRight。
    initFrameHeight(mFrame,hTable);
 }
}

/**
 * 获取当前页面的高度
 */
function getBodyHeight(doc){
  if(doc.all) return doc.body.offsetHeight;
  else return doc.body.scrollHeight;
}

/**
 * 获取内嵌页中的高度.
 * 若另含子内嵌(moduleRight)页时,应考虑该页面的高度.
 */
function getFrameHeight(mFrame){
  var h1 = mFrame.document.body.offsetHeight;
  var h2 = mFrame.document.body.scrollHeight;
  if(mFrame.moduleRight != null){
      var h3 = mFrame.moduleRight.document.body.scrollHeight;
    if(h3 h2) h2 = h3;
  }
  return h2;
}

/**
 * 设置子内嵌页面的高度.
 * 通过设置iframe所在table的高度来调整。
 */
function initFrameHeight(frame,hFrame){
  var tbl = frame.document.getElementById('tblMainFrame');
  tbl.style.height = hFrame;
}

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  主页面,在加载完毕(onload)、窗口大小调整(onresize),以及iframe的加载完毕时,需调用:handleFrameLoad,代码如下:

html
  body onload="handleFrameLoad();" onResize="handleFrameLoad();"
  iframe src="" id="mainFrame" name="mainFrame" border=0 width=100% height=100% frameborder="0" marginwidth="0" hspace="0" scrolling="no" onload="handleFrameLoad();"/
  /body
/html

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  其他内嵌页如下(注:此处的iframe高度设为100%,其高度由父页面通过设置tabletblMainFrame的高度来进行调整):

html
  body class="body" style="overflow:hidden;margin:0px;padding:0px"
    table width="100%" height="100%" id="tblMainFrame" border="0" align="center" cellpadding="0" cellspacing="0"
      tr
        td id='content' height=100%
          iframe src="about:blank" width="100%" height="100%" name="moduleRight" id="moduleRight" frameborder="0" hspace="0"/
        /td
      /tr
    /table
  /body
/html

展开更多 50%)
分享

猜你喜欢

利用JAVASCRIPT让IFRAME框架的高度自适应

Web开发
利用JAVASCRIPT让IFRAME框架的高度自适应

javascript应用:Iframe自适应其加载的内容高度

Web开发
javascript应用:Iframe自适应其加载的内容高度

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

关于IFRAME 自适应高度的研究

Web开发
关于IFRAME 自适应高度的研究

让iframe自适应高度(支持XHTML支持FF)

Web开发
让iframe自适应高度(支持XHTML支持FF)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jQuery解决iframe高度自适应代码

Web开发
jQuery解决iframe高度自适应代码

让iframe自适应高度(支持xhtml)IE firefox兼容

Web开发
让iframe自适应高度(支持xhtml)IE firefox兼容

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JavaScript获取选中文本

JavaScript获取选中文本

Metro版Movie Maker将登录Windows 8.1

Metro版Movie Maker将登录Windows 8.1
下拉加载更多内容 ↓