ExtJs，从不同版本的iframe创建窗口，正确设置高度

ExtJs, creating window from iframe in different versions, setting height correctly

本文关键字：窗口 设置 高度 创建 版本 ExtJs iframe      更新时间：2023-09-26

代码:

<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:[
...
相关文章：