- 浏览: 26524 次
- 性别:
- 来自: Luna
最新评论
-
zhyj124:
不是我想要的。我IFRAME中的页面是第三方的,人家不能也不会 ...
Iframe高度自适应(兼容IE/Firefox、同域/跨域)
之前写过一篇文章对比了不同浏览器环境对document.body属性的解释,地址是:http://www.silentash.com/blog/2008/62.html
回顾一下,在限定了文档类型的情况下,多数浏览器对document.body属性的解释都是相同的:在加上DTD文档格式后,IE7,FF,OPERA这三个浏览器表现出了惊人的一致性,只有IE6在页面内容超出窗口大小时出现了大变化(具体请看IE6部分),也就是说在正常的窗口最大化情况下,四个浏览器对这些属性的解释都是一样的,既:
•body.scrollHeight=内容实际高度;
•body.scrollWidth=可视区域宽度;
•body.clientHeight=内容实际高度;
•body.clientWidth=可视区域宽度;
•body.offsetHeight=内容实际高度;
•body.offsetWidth=可视区域宽度;
IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。
上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。
那我们怎么办呢?难道加上了文档DTD类型之后就再也不能取到“可见区域高度”和“内容实际宽度”等等属性了吗?
Code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>documentElement</title>
<style type="text/css">
body{margin:0;padding:0;font:12px/150% arial;}
</style>
<script type="text/javascript">
function a(){
var scrollTop;
var scrollLeft;
if (typeof window.pageYOffset != 'undefined') {
scrollTop = window.pageYOffset;
scrollLeft = window.pageXOffset;
}
else if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
scrollTop = document.documentElement.scrollTop;
scrollLeft = document.documentElement.scrollLeft;
}
else if (typeof document.body != 'undefined') {
scrollTop = document.body.scrollTop;
scrollLeft = document.body.scrollLeft;
}
var scrollHeight = document.documentElement.scrollHeight;
var scrollWidth = document.documentElement.scrollWidth;
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
var offsetWidth = document.documentElement.offsetWidth;
var offsetHeight = document.documentElement.offsetHeight;
var screenTop = window.screenTop;
var screenBottom = window.screenBottom;
var screenLeft = window.screenLeft;
var sheight = window.screen.height;
var swidth = window.screen.width;
var availHeight = window.screen.availHeight;
var availWidth = window.screen.availWidth;
document.getElementById('scrollTop').value = scrollTop;
document.getElementById('scrollLeft').value = scrollLeft;
document.getElementById('scrollHeight').value = scrollHeight;
document.getElementById('scrollWidth').value = scrollWidth;
document.getElementById('clientWidth').value = clientWidth;
document.getElementById('clientHeight').value = clientHeight;
document.getElementById('offsetWidth').value = offsetWidth;
document.getElementById('offsetHeight').value = offsetHeight;
document.getElementById('screenTop').value = screenTop;
document.getElementById('screenBottom').value = screenBottom;
document.getElementById('screenLeft').value = screenLeft;
document.getElementById('sheight').value = sheight;
document.getElementById('swidth').value = swidth;
document.getElementById('availHeight').value = availHeight;
document.getElementById('availWidth').value = availWidth;
}
</script>
</head>
<body>
<div style="width:400px;height:400px;margin:0 auto;font-size:12px;">
<center>
<table width="400" border="0" cellspacing="0" cellpadding="0" style="font-size:12px;margin-top:20px;">
<tr>
<td width="187" align="right">scrollTop(滚动条卷过的高):</td>
<td width="10"> </td>
<td width="209"><input type="text" name="scrollTop" id="scrollTop" /></td>
</tr>
<tr>
<td align="right">scrollLeft(滚动条卷过的宽):</td>
<td> </td>
<td><input type="text" name="scrollLeft" id="scrollLeft" /></td>
</tr>
<tr>
<td align="right">scrollHeight(内容实际高度):</td>
<td> </td>
<td><input type="text" name="scrollHeight" id="scrollHeight" /></td>
</tr>
<tr>
<td align="right">scrollWidth(内容实际宽度):</td>
<td> </td>
<td><input type="text" name="scrollWidth" id="scrollWidth" /></td>
</tr>
<tr>
<td align="right">clientWidth(可见区域宽):</td>
<td> </td>
<td><input type="text" name="clientWidth" id="clientWidth" /></td>
</tr>
<tr>
<td align="right">clientHeight(可见区域高):</td>
<td> </td>
<td><input type="text" name="clientHeight" id="clientHeight" /></td>
</tr>
<tr>
<td align="right">offsetWidth(加滚动条宽?):</td>
<td> </td>
<td><input type="text" name="offsetWidth" id="offsetWidth" /></td>
</tr>
<tr>
<td align="right">offsetHeight(加滚动条高?):</td>
<td> </td>
<td><input type="text" name="offsetHeight" id="offsetHeight" /></td>
</tr>
<tr>
<td align="right">screenTop:</td>
<td> </td>
<td><input type="text" name="screenTop" id="screenTop" /></td>
</tr>
<tr>
<td align="right">screenBottom:</td>
<td> </td>
<td><input type="text" name="screenBottom" id="screenBottom" /></td>
</tr>
<tr>
<td align="right">screenLeft:</td>
<td> </td>
<td><input type="text" name="screenLeft" id="screenLeft" /></td>
</tr>
<tr>
<td align="right">sheight(分辨率高):</td>
<td> </td>
<td><input type="text" name="sheight" id="sheight" /></td>
</tr>
<tr>
<td align="right">swidth(分分辨率宽):</td>
<td> </td>
<td><input type="text" name="swidth" id="swidth" /></td>
</tr>
<tr>
<td align="right">availHeight:</td>
<td> </td>
<td><input type="text" name="availHeight" id="availHeight" /></td>
</tr>
<tr>
<td align="right">availWidth:</td>
<td> </td>
<td><input type="text" name="availWidth" id="availWidth" /></td>
</tr>
</table>
<a href="javascript:a()" style="height:20px;display:block;">内容高度是400PX,点击查看所有属性值</a>
</center>
</div>
</body>
</html>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>documentElement</title>
<style type="text/css">
body{margin:0;padding:0;font:12px/150% arial;}
</style>
<script type="text/javascript">
function a(){
var scrollTop;
var scrollLeft;
if (typeof window.pageYOffset != 'undefined') {
scrollTop = window.pageYOffset;
scrollLeft = window.pageXOffset;
}
else if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
scrollTop = document.documentElement.scrollTop;
scrollLeft = document.documentElement.scrollLeft;
}
else if (typeof document.body != 'undefined') {
scrollTop = document.body.scrollTop;
scrollLeft = document.body.scrollLeft;
}
var scrollHeight = document.documentElement.scrollHeight;
var scrollWidth = document.documentElement.scrollWidth;
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
var offsetWidth = document.documentElement.offsetWidth;
var offsetHeight = document.documentElement.offsetHeight;
var screenTop = window.screenTop;
var screenBottom = window.screenBottom;
var screenLeft = window.screenLeft;
var sheight = window.screen.height;
var swidth = window.screen.width;
var availHeight = window.screen.availHeight;
var availWidth = window.screen.availWidth;
document.getElementById('scrollTop').value = scrollTop;
document.getElementById('scrollLeft').value = scrollLeft;
document.getElementById('scrollHeight').value = scrollHeight;
document.getElementById('scrollWidth').value = scrollWidth;
document.getElementById('clientWidth').value = clientWidth;
document.getElementById('clientHeight').value = clientHeight;
document.getElementById('offsetWidth').value = offsetWidth;
document.getElementById('offsetHeight').value = offsetHeight;
document.getElementById('screenTop').value = screenTop;
document.getElementById('screenBottom').value = screenBottom;
document.getElementById('screenLeft').value = screenLeft;
document.getElementById('sheight').value = sheight;
document.getElementById('swidth').value = swidth;
document.getElementById('availHeight').value = availHeight;
document.getElementById('availWidth').value = availWidth;
}
</script>
</head>
<body>
<div style="width:400px;height:400px;margin:0 auto;font-size:12px;">
<center>
<table width="400" border="0" cellspacing="0" cellpadding="0" style="font-size:12px;margin-top:20px;">
<tr>
<td width="187" align="right">scrollTop(滚动条卷过的高):</td>
<td width="10"> </td>
<td width="209"><input type="text" name="scrollTop" id="scrollTop" /></td>
</tr>
<tr>
<td align="right">scrollLeft(滚动条卷过的宽):</td>
<td> </td>
<td><input type="text" name="scrollLeft" id="scrollLeft" /></td>
</tr>
<tr>
<td align="right">scrollHeight(内容实际高度):</td>
<td> </td>
<td><input type="text" name="scrollHeight" id="scrollHeight" /></td>
</tr>
<tr>
<td align="right">scrollWidth(内容实际宽度):</td>
<td> </td>
<td><input type="text" name="scrollWidth" id="scrollWidth" /></td>
</tr>
<tr>
<td align="right">clientWidth(可见区域宽):</td>
<td> </td>
<td><input type="text" name="clientWidth" id="clientWidth" /></td>
</tr>
<tr>
<td align="right">clientHeight(可见区域高):</td>
<td> </td>
<td><input type="text" name="clientHeight" id="clientHeight" /></td>
</tr>
<tr>
<td align="right">offsetWidth(加滚动条宽?):</td>
<td> </td>
<td><input type="text" name="offsetWidth" id="offsetWidth" /></td>
</tr>
<tr>
<td align="right">offsetHeight(加滚动条高?):</td>
<td> </td>
<td><input type="text" name="offsetHeight" id="offsetHeight" /></td>
</tr>
<tr>
<td align="right">screenTop:</td>
<td> </td>
<td><input type="text" name="screenTop" id="screenTop" /></td>
</tr>
<tr>
<td align="right">screenBottom:</td>
<td> </td>
<td><input type="text" name="screenBottom" id="screenBottom" /></td>
</tr>
<tr>
<td align="right">screenLeft:</td>
<td> </td>
<td><input type="text" name="screenLeft" id="screenLeft" /></td>
</tr>
<tr>
<td align="right">sheight(分辨率高):</td>
<td> </td>
<td><input type="text" name="sheight" id="sheight" /></td>
</tr>
<tr>
<td align="right">swidth(分分辨率宽):</td>
<td> </td>
<td><input type="text" name="swidth" id="swidth" /></td>
</tr>
<tr>
<td align="right">availHeight:</td>
<td> </td>
<td><input type="text" name="availHeight" id="availHeight" /></td>
</tr>
<tr>
<td align="right">availWidth:</td>
<td> </td>
<td><input type="text" name="availWidth" id="availWidth" /></td>
</tr>
</table>
<a href="javascript:a()" style="height:20px;display:block;">内容高度是400PX,点击查看所有属性值</a>
</center>
</div>
</body>
</html>
其实,我们可以用document.documentElement代替document.body来获取我们想要的结果
将代码中的document.body替换为document.documentElement,再来看看各浏览器下的实际结果:
IE6:
IE7:
FF3:
opera9:
safari:
netscape9:
测试结果表明,IE系列浏览器对document.documentElement属性的解释是正确的,其它标准浏览器将offsetHeight解释成了scrollHeight。火狐和netscape更是把这两个属性调换了过来。不过总的来说各属性都可以有个相应的解释,不会像document.body一样只有可怜的两种解释。
终于可以放心地使用JS方法获取各种页面高宽属性了吧^_^!
回顾一下,在限定了文档类型的情况下,多数浏览器对document.body属性的解释都是相同的:在加上DTD文档格式后,IE7,FF,OPERA这三个浏览器表现出了惊人的一致性,只有IE6在页面内容超出窗口大小时出现了大变化(具体请看IE6部分),也就是说在正常的窗口最大化情况下,四个浏览器对这些属性的解释都是一样的,既:
•body.scrollHeight=内容实际高度;
•body.scrollWidth=可视区域宽度;
•body.clientHeight=内容实际高度;
•body.clientWidth=可视区域宽度;
•body.offsetHeight=内容实际高度;
•body.offsetWidth=可视区域宽度;
IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。
上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。
那我们怎么办呢?难道加上了文档DTD类型之后就再也不能取到“可见区域高度”和“内容实际宽度”等等属性了吗?
Code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>documentElement</title>
<style type="text/css">
body{margin:0;padding:0;font:12px/150% arial;}
</style>
<script type="text/javascript">
function a(){
var scrollTop;
var scrollLeft;
if (typeof window.pageYOffset != 'undefined') {
scrollTop = window.pageYOffset;
scrollLeft = window.pageXOffset;
}
else if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
scrollTop = document.documentElement.scrollTop;
scrollLeft = document.documentElement.scrollLeft;
}
else if (typeof document.body != 'undefined') {
scrollTop = document.body.scrollTop;
scrollLeft = document.body.scrollLeft;
}
var scrollHeight = document.documentElement.scrollHeight;
var scrollWidth = document.documentElement.scrollWidth;
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
var offsetWidth = document.documentElement.offsetWidth;
var offsetHeight = document.documentElement.offsetHeight;
var screenTop = window.screenTop;
var screenBottom = window.screenBottom;
var screenLeft = window.screenLeft;
var sheight = window.screen.height;
var swidth = window.screen.width;
var availHeight = window.screen.availHeight;
var availWidth = window.screen.availWidth;
document.getElementById('scrollTop').value = scrollTop;
document.getElementById('scrollLeft').value = scrollLeft;
document.getElementById('scrollHeight').value = scrollHeight;
document.getElementById('scrollWidth').value = scrollWidth;
document.getElementById('clientWidth').value = clientWidth;
document.getElementById('clientHeight').value = clientHeight;
document.getElementById('offsetWidth').value = offsetWidth;
document.getElementById('offsetHeight').value = offsetHeight;
document.getElementById('screenTop').value = screenTop;
document.getElementById('screenBottom').value = screenBottom;
document.getElementById('screenLeft').value = screenLeft;
document.getElementById('sheight').value = sheight;
document.getElementById('swidth').value = swidth;
document.getElementById('availHeight').value = availHeight;
document.getElementById('availWidth').value = availWidth;
}
</script>
</head>
<body>
<div style="width:400px;height:400px;margin:0 auto;font-size:12px;">
<center>
<table width="400" border="0" cellspacing="0" cellpadding="0" style="font-size:12px;margin-top:20px;">
<tr>
<td width="187" align="right">scrollTop(滚动条卷过的高):</td>
<td width="10"> </td>
<td width="209"><input type="text" name="scrollTop" id="scrollTop" /></td>
</tr>
<tr>
<td align="right">scrollLeft(滚动条卷过的宽):</td>
<td> </td>
<td><input type="text" name="scrollLeft" id="scrollLeft" /></td>
</tr>
<tr>
<td align="right">scrollHeight(内容实际高度):</td>
<td> </td>
<td><input type="text" name="scrollHeight" id="scrollHeight" /></td>
</tr>
<tr>
<td align="right">scrollWidth(内容实际宽度):</td>
<td> </td>
<td><input type="text" name="scrollWidth" id="scrollWidth" /></td>
</tr>
<tr>
<td align="right">clientWidth(可见区域宽):</td>
<td> </td>
<td><input type="text" name="clientWidth" id="clientWidth" /></td>
</tr>
<tr>
<td align="right">clientHeight(可见区域高):</td>
<td> </td>
<td><input type="text" name="clientHeight" id="clientHeight" /></td>
</tr>
<tr>
<td align="right">offsetWidth(加滚动条宽?):</td>
<td> </td>
<td><input type="text" name="offsetWidth" id="offsetWidth" /></td>
</tr>
<tr>
<td align="right">offsetHeight(加滚动条高?):</td>
<td> </td>
<td><input type="text" name="offsetHeight" id="offsetHeight" /></td>
</tr>
<tr>
<td align="right">screenTop:</td>
<td> </td>
<td><input type="text" name="screenTop" id="screenTop" /></td>
</tr>
<tr>
<td align="right">screenBottom:</td>
<td> </td>
<td><input type="text" name="screenBottom" id="screenBottom" /></td>
</tr>
<tr>
<td align="right">screenLeft:</td>
<td> </td>
<td><input type="text" name="screenLeft" id="screenLeft" /></td>
</tr>
<tr>
<td align="right">sheight(分辨率高):</td>
<td> </td>
<td><input type="text" name="sheight" id="sheight" /></td>
</tr>
<tr>
<td align="right">swidth(分分辨率宽):</td>
<td> </td>
<td><input type="text" name="swidth" id="swidth" /></td>
</tr>
<tr>
<td align="right">availHeight:</td>
<td> </td>
<td><input type="text" name="availHeight" id="availHeight" /></td>
</tr>
<tr>
<td align="right">availWidth:</td>
<td> </td>
<td><input type="text" name="availWidth" id="availWidth" /></td>
</tr>
</table>
<a href="javascript:a()" style="height:20px;display:block;">内容高度是400PX,点击查看所有属性值</a>
</center>
</div>
</body>
</html>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>documentElement</title>
<style type="text/css">
body{margin:0;padding:0;font:12px/150% arial;}
</style>
<script type="text/javascript">
function a(){
var scrollTop;
var scrollLeft;
if (typeof window.pageYOffset != 'undefined') {
scrollTop = window.pageYOffset;
scrollLeft = window.pageXOffset;
}
else if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
scrollTop = document.documentElement.scrollTop;
scrollLeft = document.documentElement.scrollLeft;
}
else if (typeof document.body != 'undefined') {
scrollTop = document.body.scrollTop;
scrollLeft = document.body.scrollLeft;
}
var scrollHeight = document.documentElement.scrollHeight;
var scrollWidth = document.documentElement.scrollWidth;
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
var offsetWidth = document.documentElement.offsetWidth;
var offsetHeight = document.documentElement.offsetHeight;
var screenTop = window.screenTop;
var screenBottom = window.screenBottom;
var screenLeft = window.screenLeft;
var sheight = window.screen.height;
var swidth = window.screen.width;
var availHeight = window.screen.availHeight;
var availWidth = window.screen.availWidth;
document.getElementById('scrollTop').value = scrollTop;
document.getElementById('scrollLeft').value = scrollLeft;
document.getElementById('scrollHeight').value = scrollHeight;
document.getElementById('scrollWidth').value = scrollWidth;
document.getElementById('clientWidth').value = clientWidth;
document.getElementById('clientHeight').value = clientHeight;
document.getElementById('offsetWidth').value = offsetWidth;
document.getElementById('offsetHeight').value = offsetHeight;
document.getElementById('screenTop').value = screenTop;
document.getElementById('screenBottom').value = screenBottom;
document.getElementById('screenLeft').value = screenLeft;
document.getElementById('sheight').value = sheight;
document.getElementById('swidth').value = swidth;
document.getElementById('availHeight').value = availHeight;
document.getElementById('availWidth').value = availWidth;
}
</script>
</head>
<body>
<div style="width:400px;height:400px;margin:0 auto;font-size:12px;">
<center>
<table width="400" border="0" cellspacing="0" cellpadding="0" style="font-size:12px;margin-top:20px;">
<tr>
<td width="187" align="right">scrollTop(滚动条卷过的高):</td>
<td width="10"> </td>
<td width="209"><input type="text" name="scrollTop" id="scrollTop" /></td>
</tr>
<tr>
<td align="right">scrollLeft(滚动条卷过的宽):</td>
<td> </td>
<td><input type="text" name="scrollLeft" id="scrollLeft" /></td>
</tr>
<tr>
<td align="right">scrollHeight(内容实际高度):</td>
<td> </td>
<td><input type="text" name="scrollHeight" id="scrollHeight" /></td>
</tr>
<tr>
<td align="right">scrollWidth(内容实际宽度):</td>
<td> </td>
<td><input type="text" name="scrollWidth" id="scrollWidth" /></td>
</tr>
<tr>
<td align="right">clientWidth(可见区域宽):</td>
<td> </td>
<td><input type="text" name="clientWidth" id="clientWidth" /></td>
</tr>
<tr>
<td align="right">clientHeight(可见区域高):</td>
<td> </td>
<td><input type="text" name="clientHeight" id="clientHeight" /></td>
</tr>
<tr>
<td align="right">offsetWidth(加滚动条宽?):</td>
<td> </td>
<td><input type="text" name="offsetWidth" id="offsetWidth" /></td>
</tr>
<tr>
<td align="right">offsetHeight(加滚动条高?):</td>
<td> </td>
<td><input type="text" name="offsetHeight" id="offsetHeight" /></td>
</tr>
<tr>
<td align="right">screenTop:</td>
<td> </td>
<td><input type="text" name="screenTop" id="screenTop" /></td>
</tr>
<tr>
<td align="right">screenBottom:</td>
<td> </td>
<td><input type="text" name="screenBottom" id="screenBottom" /></td>
</tr>
<tr>
<td align="right">screenLeft:</td>
<td> </td>
<td><input type="text" name="screenLeft" id="screenLeft" /></td>
</tr>
<tr>
<td align="right">sheight(分辨率高):</td>
<td> </td>
<td><input type="text" name="sheight" id="sheight" /></td>
</tr>
<tr>
<td align="right">swidth(分分辨率宽):</td>
<td> </td>
<td><input type="text" name="swidth" id="swidth" /></td>
</tr>
<tr>
<td align="right">availHeight:</td>
<td> </td>
<td><input type="text" name="availHeight" id="availHeight" /></td>
</tr>
<tr>
<td align="right">availWidth:</td>
<td> </td>
<td><input type="text" name="availWidth" id="availWidth" /></td>
</tr>
</table>
<a href="javascript:a()" style="height:20px;display:block;">内容高度是400PX,点击查看所有属性值</a>
</center>
</div>
</body>
</html>
其实,我们可以用document.documentElement代替document.body来获取我们想要的结果
将代码中的document.body替换为document.documentElement,再来看看各浏览器下的实际结果:
IE6:
IE7:
FF3:
opera9:
safari:
netscape9:
测试结果表明,IE系列浏览器对document.documentElement属性的解释是正确的,其它标准浏览器将offsetHeight解释成了scrollHeight。火狐和netscape更是把这两个属性调换了过来。不过总的来说各属性都可以有个相应的解释,不会像document.body一样只有可怜的两种解释。
终于可以放心地使用JS方法获取各种页面高宽属性了吧^_^!
发表评论
-
三谈Iframe自适应高度
2011-05-13 15:55 909http://ued.koubei.com/?p=1217 -
解决iframe跨域高度自适应问题(zhuanzai)
2011-05-11 16:55 2215前期因项目需要解决iframe跨域高度自适应问题,但在 ... -
Iframe高度自适应(兼容IE/Firefox、同域/跨域)
2011-05-11 16:13 1542在实际的项目进行中,很多地方可能由于历史原因不得不去使用ifr ... -
window.location.hash属性介绍
2011-05-11 16:06 1263location是javascript里边管 ... -
Iframe自适应高度
2011-05-10 17:03 817在做页面的时候经常会用到iframe,同样iframe的高度问 ... -
让IE中的IFrame透明
2011-05-09 17:00 1483除了IE之外的其他浏览器,默认情况下IFrame都是透明的。但 ...
相关推荐
火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement。 页面没有DTD,即没指定DOCTYPE时,使用document.body。 IE和Firefox都是如此。 以上这篇解决VUE中document.body.scrollTop为0的问题就是小编分享...
用javascript地址栏显示源码: javascript:s=document.documentElement.outerHTML;document.write('<body></body>');document.body.innerText=s;
if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape ...
ll建议用document.documentElement代替document.body
对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途。其实这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,盒模型的渲染在 Standards Mode和Quirks Mode是有很大...
} else if(document.body.scrollHeight > document.body.offsetHeight) { // all but IE Mac scrW = document.body.scrollWidth; scrH = document.body.scrollHeight; } else if(document.body) { /...
body是DOM对象里的body子节点,即body标签,documentElement 是整个节点树的根节点root,详细介绍请看本文,感兴趣的朋友可以参考下
document.documentElement.scrollTop在Chrome里总为0document.body.scrollTop 在IE和firefox里总为01、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异示例:...
var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; } else { var clientHeight = (document....
小球在桌面上自由移动,要清楚的几个问题 ...宽:document.documentElement.clientWidth || document.body.clientWidth; 高:document.documentElement.clientHeight || document.body.clientHeight;
页面具有 DTD(或者说指定了 DOCTYPE)时,使用 document.documentElement。
地址栏显示源码.js地址栏显示源码.js地址栏显示源码.js
在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值,下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别: [removed]function getInfo(){ var s = “”; s += ...
取得窗口大小的代码: 代码如下: var pageWidth = window.innerWidth, var pageHeight = window.innerHeight; if(typeof pageWidth != “number”){ if(document.compatMode ... }else{ pageWidth = document.body.clie
document.body.clientWidth – 网页可见区域宽 document.body.clientHeight – 网页可见区域高 document.body.offsetWidth – 网页可见区域宽,包括边线和滚动条的宽 document.body.offsetHeight – 网页可见区域高...
document.body.removeChild(document.getElementById("LoadingImg")); } } //遮罩整個IFrame function hideIframeNoImg(level) { var div = document.createElement("div"); var iframe=document....
$(document.documentElement).xpath("body | head"); // Returns {Element} head and body (ordered) $(document.documentElement).xpath("body, head"); // Returns {Element} body and head (not ordered) ...