代码:
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
Ext.onReady(function () {
var userIdeaPopupCfg = {
layout:'fit',
id: 'feedbackWindow',
title: 'some title',
width: 800,
border: false,
modal: true,
resizable: false,
items: {
xtype: 'box',
autoEl: {
tag: 'iframe',
src: "extJsIframe.html",
scrolling: "no",
onload: "javascript:resizeIframe(this);"
}
},
buttons:[
{
text: 'Ok Button',
id: 'okButton'
},
{
text: 'Cancel Button',
id: 'cancelButton'
}
]
};
new Ext.Window(userIdeaPopupCfg).show();
});
</script>
extJsIframe.html内容
<!DOCTYPE html>
<html>
<body>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> Hello</div>
<div> EXTJS LAST LINE</div>
</body>
</html>
在ExtJs 3中一切都很好。我可以看到框架的全部内容。计算出iframe的正确高度。
但是在ExtJs 4和ExtJs 5版本中,窗口的大小总是相同的。resizeIframe()被调用,但不改变任何东西。
如何解决这个问题?我想看到iframe的全部内容在所有ext js版本(至少3,4和5)
Ext Js在版本4,5,可能在6包装iframe与div元素,已经计算高度,所以,如果你的页面应该从不同的Ext Js版本的页面打开,下面的解决方案应该工作:
function getDocHeight(doc) {
doc = doc || document;
// stackoverflow.com/questions/1145850/
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function resizeIframe(obj) {
//WARNING: in chrome, when you open the same window with iframe serveral times,
//the browser may return different iframe height
var doc = obj.contentDocument? obj.contentDocument: obj.contentWindow.document;
var magicNumber = 4;
var iframeHeight = getDocHeight(doc) + magicNumber;
if ( !(Ext.version && 3 == Ext.version.substring(0, Ext.version.indexOf("."))))
{
//fix for 4 and 5 ext js, parent of a frame and it's siblings should be updated
var iframeWrapperId = obj.parentElement.id;
var extJsParentWindowId = obj.parentElement.parentElement.id;
var originalIframeWrapperHight = parseInt(document.getElementById(iframeWrapperId).style.height, 10);
var hightDifference = iframeHeight - originalIframeWrapperHight;
//move all wrappers that go after iframe
var windowParentChildren = obj.parentElement.parentElement.children;
var elementAfterIframeWrapper = false;
for (var i = 0; i < windowParentChildren.length; i++ )
{
var childElementId = windowParentChildren[i].id;
if (iframeWrapperId == childElementId)
{
elementAfterIframeWrapper = true;
}
else if (elementAfterIframeWrapper)
{
var currentTopPosition = parseInt(windowParentChildren[i].style.top, 10);
windowParentChildren[i].style.top = (currentTopPosition + hightDifference) + 'px';
}
}
//update height of iframe wrapper:
document.getElementById(iframeWrapperId).style.height = iframeHeight + 'px';
//update height of parent window, where iframe is located:
var currentParentWindowHeight =
parseInt(document.getElementById(extJsParentWindowId).style.height, 10);
document.getElementById(extJsParentWindowId).style.height =
(currentParentWindowHeight + hightDifference) + 'px';
//move parent window
var currentParentWindowTop = parseInt(document.getElementById(extJsParentWindowId).style.top, 10);
var minTopPosition = 100;
var topDifference = currentParentWindowTop - hightDifference;
var updatedParentWindowTop = topDifference < 100 ? minTopPosition : topDifference;
Ext.get(extJsParentWindowId).setTop(updatedParentWindowTop);
}
//change iframe size itself
obj.style.height = iframeHeight + 'px';
}
....
var userIdeaPopupCfg = {
layout:'fit',
...
width: 800,
border: false,
modal: true,
resizable: false,
html:'<iframe id="someFrameId" src="iframe.html" frameBorder="0" style="width: 100%; height: 100%;" scrolling="no" onload="javascript:resizeIframe(this);"></iframe>',
buttons:[
...