87,904
社区成员
发帖
与我相关
我的任务
分享如何使iframe自适应高度为100%，垂直滚动条在body部分？
网上找了许久，都是在windows onload时，iframe高度=浏览器高度 的代码。
而我想请教大家，如何使iframe自适应高度为100%，垂直滚动条在body部分？（浏览器外面那条）
另外如果在iframe的google搜索里输入关键字，提交的搜索后进行翻页，搜索结果页的iframe也需要根据搜索结果的字数，自适应高度，iframe始终没有垂直滚动条，而垂直滚动条总是位于BODY部分。 谢谢。
（BTW：在不刷新主页，iframe页面根据不同的索结果的字数自适应高度，是不是只有jquery才能做到？）
而我想请教大家，如何使iframe自适应高度为100%，垂直滚动条在body部分？（浏览器外面那条）
<body style="scroll-x:hidden;scroll-y:auto;">
<iframe frameborder="0" id="iframe" scrolling="no" src="http://www.google.com" style="width:960px;height:100%" height="100%" width="960"></iframe>另外如果在iframe的google搜索里输入关键字，提交的搜索后进行翻页，搜索结果页的iframe也需要根据搜索结果的字数，自适应高度，iframe始终没有垂直滚动条，而垂直滚动条总是位于BODY部分。 谢谢。
（BTW：在不刷新主页，iframe页面根据不同的索结果的字数自适应高度，是不是只有jquery才能做到？）
...全文
请发表友善的回复…
发表回复
mumubangditu 2011-05-13
- 打赏
- 举报
谢谢大家。
sowuqing 2011-05-12
- 打赏
- 举报
function ChangeFrame(pageParent, width, height) {
if (!pageParent)
pageParent = parent;
if (!width)
width = document.body.offsetWidth;
if (!height)
height = document.body.offsetHeight;
var regExp = /[^\/]*\.(html|htm|aspx)/gi;
var page = location.href.match(regExp)[0].toLowerCase();
height = height < 600 ? 600 : height;
width = width < 770 ? 770 : width;
var tarframe;
if (pageParent) {
var url = pageParent.document.getElementsByTagName("iframe");
for (var i = 0; i < url.length; i++) {
var frameSrc = url[i].src.match(regExp)[0].toLowerCase();
if (frameSrc == page)
tarframe = url[i];
}
}
if (tarframe) {
tarframe.height = height;
tarframe.width = width;
if (pageParent.parent != pageParent.self) {
parent.ChangeFrame(pageParent.parent, 770, height)
}
else {
LoadCssFile(parent);
}
}
}
每个子页面调用这个方法，就可以了可以没有任何参数
if (!pageParent)
pageParent = parent;
if (!width)
width = document.body.offsetWidth;
if (!height)
height = document.body.offsetHeight;
var regExp = /[^\/]*\.(html|htm|aspx)/gi;
var page = location.href.match(regExp)[0].toLowerCase();
height = height < 600 ? 600 : height;
width = width < 770 ? 770 : width;
var tarframe;
if (pageParent) {
var url = pageParent.document.getElementsByTagName("iframe");
for (var i = 0; i < url.length; i++) {
var frameSrc = url[i].src.match(regExp)[0].toLowerCase();
if (frameSrc == page)
tarframe = url[i];
}
}
if (tarframe) {
tarframe.height = height;
tarframe.width = width;
if (pageParent.parent != pageParent.self) {
parent.ChangeFrame(pageParent.parent, 770, height)
}
else {
LoadCssFile(parent);
}
}
}
每个子页面调用这个方法，就可以了可以没有任何参数
仲兴轩 2011-05-12
- 打赏
- 举报
你分页的时候, iframe页面不是重新加载了嘛,
你再执行一遍onload就是呀,
iframe 页面中
<body onload=="parent.getElementById('iframe').onload();">
你再执行一遍onload就是呀,
iframe 页面中
<body onload=="parent.getElementById('iframe').onload();">
xuexiaodong2009 2011-05-11
- 打赏
- 举报
iframe不能自适应高度，要通过脚本控制才行
仲兴轩 2011-05-11
- 打赏
- 举报
我自己用的,在iframe中加
onload="this.height=document.getElementById('iframe').contentWindow.document.body.scrollHeight;"
按分页应该会自己调整高度的,
实在i不行在iframe页面中加parent.getElementById('iframe').onload();
// 另外, ID最好不要用iframe,
onload="this.height=document.getElementById('iframe').contentWindow.document.body.scrollHeight;"
按分页应该会自己调整高度的,
实在i不行在iframe页面中加parent.getElementById('iframe').onload();
// 另外, ID最好不要用iframe,
bhbhxy 2011-05-11
- 打赏
- 举报
iframe不能自适应高度，要通过脚本控制才行
mumubangditu 2011-05-11
- 打赏
- 举报
#2楼的代码还是自适应窗口大小，而不是IFRAME大小。另外ONLOAD的话，只能在页面加载时执行一次。
