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>
<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>
