在子页面中添加当前代码即可改变iframe的高度,使用jquery.ba-resize.min.js插件实时监控iframe的body的高度,随时改变父页面的高度
$(document).ready(function(){
//修改父页面样式
$(parent.document).find(".content").attr("style","height:"+$("body").height()+"px");
//修改父页面iframe高度
$('#main-iframe', parent.document).height($("body").height());
})
$('body').resize(function () {
var body_height = $(this).height();
$(parent.document).find(".content").attr("style","height:"+body_height+"px");
$('#main-iframe', parent.document).height(body_height);
})
刚开始试过下面这种方式改变高度,但是如果你要改变iframe的src就会出现延迟的情况,既获取的页面的高度还是上一个页面的高度,所以需要延迟调用,这种方法不是很保险 ,所以在网上又找了上面的这种方法
$(".main-iframe").attr("src",iframe_href);
setTimeout(function (){
setIframeHeight(document.getElementById('main-iframe'));
},100);
//修改页面和iframe的高度
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.body.scrollHeight || iframeWin.document.documentElement.scrollHeight ;
}
}
};