获取网页高度的问题

document.body.scrollHeight

假设 obj 为某个 HTML 控件。obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。例如：
< div id="tool" >
< input type="button" value="提交" >
< input type="button" value="重置" >
< / div >“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框。
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。二、offsetTop 只读，而 style.top 可读写。三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

5楼正解，几乎所有对html控件高度不熟的人都能搜到这篇内容的

iframe自适应高度可以参考这种写法:    var sUserAgent = navigator.userAgent;
    var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && sUserAgent.indexOf("Opera") < 0;
    var bobo=document.getElementById("frame"); //iframe id
    if(isIE)
        bobo.height = bobo.document.body.scrollHeight;
    else
        bobo.height = screen.clientHeight;

给楼主点建议:
1. 楼上得5楼和7楼说的方法都上可用的,你用了却不行,我想你应该考虑一下其他原因.
2. 在一般情况下,设置一个控件或者对象的值不成功主要的原因是因为这个对象或者控件的值要受到外面得其他因素影响,比如说你的这种情况,很有可能是因为body的整体影响,你也许应该看看这个对象的外面是否还有什么类似容器的东西得大小设置是否合适.
3. 建议仔细看看5楼的帖子,很好..呵呵

确实不好用啊      <script type="text/javascript">
  if(parent.document.all("mainFrame"))
  {
  alert(document.body.scrollHeight)
  parent.document.all("mainFrame").height=document.body.scrollHeight+20;
  }     <iframe   id="mainFrame" width="100%" height="100%" src="http://www.163.com"></iframe>

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>無題のページ</title>
<script   type="text/javascript">
//  //**   iframe自动适应页面   **//
//  //输入你希望根据页面高度自动调整高度的iframe的名称的列表
//  //用逗号把每个iframe的ID分隔.   例如:   ["myframe1",   "myframe2]，可以只有一个窗体，则不用逗号。
//  //定义iframe的ID
//  var  iframeids=["frame"]
//  //如果用户的浏览器不支持iframe是否将iframe隐藏   yes   表示隐藏，no表示不隐藏
//  var  iframehide="yes"
//  function  dyniframesize()
//  {
//  var   dyniframe=new Array()
//  for(i=0;   i<iframeids.length;   i++)
//  {
//  if(document.getElementById)
//  {
//  //自动调整iframe高度
//  dyniframe[dyniframe.length]=document.getElementById(iframeids);
//  if(dyniframe&&!window.opera)
//  {
//  dyniframe.style.display="block"
//  if(dyniframe.contentDocument&&dyniframe.contentDocument.body.offsetHeight)   //如果用户的浏览器是NetScape
//  dyniframe.height   =   dyniframe.contentDocument.body.offsetHeight;
//  else if(dyniframe.Document&&dyniframe.Document.body.scrollHeight)   //如果用户的浏览器是IE
//  dyniframe.height=dyniframe.Document.body.scrollHeight;
//  }
//  }
//  //根据设定的参数来处理不支持iframe的浏览器的显示问题
//  if((document.all||document.getElementById)&&iframehide=="no")
//  {
//  var tempobj=document.all?document.all[iframeids]:document.getElementById(iframeids)
//  tempobj.style.display="block"
//  }
//  }
//  }
//  if(window.addEventListener)
//  window.addEventListener("load",dyniframesize, false)
//  else if(window.attachEvent)
//  window.attachEvent("onload",dyniframesize)
//  else
//  window.onload=dyniframesize
  </script>
</head>
<body >
    <form id="form1" runat="server">
    <div>
    <iframe   id="mainFrame" width="100%" height="100%" src="http://www.163.com"></iframe>
    <%-- <iframe name="frame" src="http://www.163.com" style="height:expression(eval(frame.document.body.scrollHeight))"   align="left"   width="100%"   marginwidth="0"   marginheight="0"   scrolling="no"   FRAMEBORDER="1"></iframe>--%>    </div>
    </form>
      <script type="text/javascript">
  if(parent.document.all("mainFrame"))
  {
  alert(document.body.scrollHeight)
  parent.document.all("mainFrame").height=document.body.scrollHeight+20;
  }
  </script>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>無題のページ</title>
<script type="text/javascript">
//var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
////extra height in px to add to iframe in FireFox 1.0+ browsers
//var FFextraHeight=getFFVersion>=0.1? 16 : 0 //function dyniframesize(iframename) {
//  var pTar = null;
//  if (document.getElementById){
//    pTar = document.getElementById(iframename);
//  }
//  else{
//    eval('pTar = ' + iframename + ';');
//  }
//  if (pTar && !window.opera){
//    //begin resizing iframe
//    pTar.style.display="block"
//
//    if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//      //ns6 syntax
//      pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight;
//    }
//    else if (pTar.Document && pTar.Document.body.scrollHeight){
//      //ie5+ syntax
//      pTar.height = pTar.Document.body.scrollHeight;
//    }
//  }
//}
//function resizeIframe()
//{
//     var targWin=self.parent.document.getElementById("myframe");
//     if(targWin!=null)
//     {
//             var heightValue=self.document.body.scrollHeight;
//             targWin.height=heightValue + 20; //多加20以显示最后一行
//      }
//}
  function  fs(){
//  var   f=document.getElementById("ff")
////  f.style.height=ff.document.body.scrollHeight
////  f.style.width=ff.document.body.scrollWidth
//var s=document.getElementById("ff").scrollHeight
//alert(document.getElementById("ff").document.body.scrollHeight)
//alert(s)
//f.offsetHeight=s
   var sUserAgent = navigator.userAgent;
    var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && sUserAgent.indexOf("Opera") < 0;
    var bobo=document.getElementById("ff"); //iframe id
    if(isIE)
        bobo.height = bobo.document.body.scrollHeight;
    else
        bobo.height = screen.clientHeight;
        alert(bobo.document.body.scrollHeight)  }
</script>
</head>
<body onload="fs()">
    <form id="form1" runat="server">
    <div>
    <iframe   id="ff"   src="http://www.163.com"  ></iframe>
   <%-- <iframe id="Iframe1" onload="javascript:{dyniframesize('Iframe1');}"
marginwidth="0" marginheight="0" frameborder="0" scrolling=no src="http://www.163.com" width="200" height=auto></iframe>--%><%--    <iframe   id="xxx"   src="http://www.163.com"></iframe>
<%--  <input   type="button"   value="Change   Size"   onclick="document.all('xxx').width=100;document.all('xxx').height=100">--%>
<input type="button"   value="ChangeSize"   onclick="fs()"/>
    </div>
    </form>
</body></html>
<%--<iframe id="myframe" style="overflow:visible; width:100%; display:block" scrolling="no" frameborder="0" src="http://www.163.com"></iframe>--%>

明白了，因为www.163.com与你的网站不是在同一个域里面的，我上面这种方法只适用于同域的网页，跨域的我就不会了，期待高人解答

如果是那样的话真的就很难了,我想知道楼主为什么飞要那样呢?可以换其他的方法?你的主要目的是不是不想要有内层网页的滚动条呢?
建议楼主参看一下http://www.baigooledu.com这个网址,你是想达到这样的效果吗?

是啊参照 GOOGLE做的是不同域的网上的资料都是同域的但还是要谢谢你

跨域的主要问题是你得不到你将要显示得网页(如:163)得信息,比如document.body.scrollHeight等其他得网页信息都是指得你现在这个页面的,而你现在这个页面又是显示"163"的网页,所以就得不到163的信息,所以比较麻烦.

但是可以获得它的html源码可是这样效果和效率都不是太好

调试易

获取网页高度的问题

解决方案 »