[英]Adjusting the layout of the contents of an iframe depending on the window size
[英]How to 'grow' an iFrame depending on the size of its contents?
我正在动态加载iFrame,有些页面比其他页面“更高”。 我希望iFrame能够相应增长。 可能吗? 如果是这样,怎么样?
是的,有可能是jquery。 父页面代码:
<iframe id='ifrm' />
iframe页面上的脚本:
function alertSize() {
var myHeight = 0;
if (typeof (parent.window.innerWidth) == 'number') {
//Non-IE
myHeight = parent.window.innerHeight;
} else if (parent.document.documentElement
&& (parent.document.documentElement.clientWidth || parent.document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
myHeight = parent.document.documentElement.clientHeight;
} else if (parent.document.body && (parent.document.body.clientWidth || parent.document.body.clientHeight)) {
//IE 4 compatible
myHeight = parent.document.body.clientHeight;
}
//window.alert( 'Height = ' + myHeight );
return myHeight;
}
function AssignFrameHeight() {
var theFrame = $("#ifrm", parent.document.body);
var frameHeight1 = getIframeHeight('ifrm');
var frameHeight2 = $(document.body).height();
if ($(document.body)[0]) {
if ($(document.body)[0].bottomMargin)
frameHeight2 += Number($(document.body)[0].bottomMargin);
if ($(document.body)[0].topMargin)
frameHeight2 += Number($(document.body)[0].topMargin);
}
if (frameHeight1 > frameHeight2) {
theFrame.height(frameHeight1 - 20);
} else {
if ($.browser.msie)
theFrame.height(frameHeight2);
else
theFrame.height(frameHeight2 + 50);
}
}
function getIframeHeight(iframeName) {
//var iframeWin = window.frames[iframeName];
var iframeEl = parent.document.getElementById
? parent.document.getElementById(iframeName)
: parent.document.all
? parent.document.all[iframeName]
: null;
if (iframeEl) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
//var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
var h = alertSize();
//var new_h = (h - 148);
//iframeEl.style.height = h + "px";
return h;
//alertSize();
}
}
回发后重新分配高度:
function pageLoad() { // MS AJAX - UpdatePanel
AssignFrameHeight();
}
$(document).ready(function() { // jQuery
AssignFrameHeight();
});
你可能会做类似的事情
document.getElementById('your-iframe').height=new_height;
但是如果你真的需要根据内容增加iframe,那么我建议你尝试另一个html元素,因为iframe可能不是你需要的。
尝试使用宽度:100%; height:100%并将它们应用于iframe元素
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.