让iframe自适应大小 解决方案
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
让iframe自适应大小解决方案
第一种:
要想使iframe自动适应宽和高,可以在test.html 页面iframe onload处增加一些JS代码。如:
这样iframe即可以自动适应高度了。如果不在onload处增加js,那也可以放到页面上来调用。比如写个函数。
function setAutoHeight(iframeElement, iframeWindow) {
iframeElement.style.height = iframeWindow.document.body.scrollHeight;
iframeElement.style.width = iframeWindow.document.body.scrollWidth ;
// 或者
// iframeElement.height = iframeWindow.document.body.offsetHeight ;
// iframeElement.width = iframeWindow.document.body.offsetWidth;
}
//调用函数setAutoHeight();
setAutoHeight( document.getElementById("iframeid"), window.frames[0] );
这样也可以达到自适应高宽的目的,在这里要注意的是,iframeElement参数必须是
document.getElementById("iframeid"),iframeWindow参数是window.frames[0] 或
document.frames["ifrname"]。这是因为通过name得到的对象是窗口(window)对象,非窗口里的iframe 对象。同时document.getElementById("iframeid)不能像window对象可以得到window.document。
所以这里最好给iframe分别加上name和id,id用来更改宽高样式属性,name用来执行window相关事件如location.href,document.write。bgColor例外,元素对象和窗口对象都可以得到,这是因为他们都有这个属性。
如果要隐藏iframe滚动条,可以设置iframeWindow.scrolling = "no";但这不能兼容多个浏览器,用iframeElement.document.body.style.overflow = "hidden";这种或直接在iframe处增加scrolling="no" html 代码就可以很好地兼容了。
3,如果不能修改父页面,而只能把代码增加在iframe页面里呢?
可以写个类似函数,放在iframe页面里:
function setAutoHeight( parentIframeElement, slefDocument ){
slefDocument.style.overflow = "hidden"; // 隐藏全部滚动条
// document.body.style.overflowY = "hidden"; // 没有竖滚动条
parentIframeElement.style.height = slefDocument.scrollHeight;
parentIframeElement.style.width = slefDocument.scrollWidth;
}
// 在页面最后执行
setAutoHeight(parent.document.getElementById("ifrid"), document.body);
// 或onload时执行
//window.onload = function() {
// setAutoHeight(parent.document.getElementById("ifrid"), document.body);
//}
// 或者超时执行
// setTimeout(
// function() {
// setAutoHeight(parent.document.getElementById("ifrid"), document.body);
// },
// 200 );
4,在线通过iframe更改父窗口里iframe的宽高,因为安全原因会有跨域的问题,若是不在同一域名,那是被禁止的。如果同在一个域名下,但2级域名不同,比如 和。这时可以通过重新设置document.domain 来跨越2级域名。
var domain = "";
try {
if( document.domain.indexOf(domain) != -1 ) {
document.domain = domain; // set new document.domain;
}
} catch (ex) {
alert("error: " + ex.toString() );
}
如果域名含有,则改将document.domain改为。
第二种: