window弹出框在iframe之外显示

最新推荐文章于 2026-05-25 11:12:35 发布

原创最新推荐文章于 2026-05-25 11:12:35 发布 · 9k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

本文介绍如何在Ext.net中解决iframe导致的窗口显示限制问题，通过特定的JavaScript技巧实现跨iframe窗口对象的操作，以及如何调整窗口内的图片大小。

Ext.net 使用了tab 控件，但是加载的时候用的iframe，导致里面如果有window弹出框，并且要全屏显示的时候，不能跳出iframe显示。

 function addMainTab(tabPanel, url, id, title, icon) {
    var tab = Ext.getCmp(id);

    if (!tab) {
        
        tab = {
            id: id,
            title: title,
            closable: false,
            iconCls: "#" + icon,
            loader: {
                url: url,
                renderer: "frame",
                loadMask: {
                    showMask: true,
                    msg: "数据加载中，请稍候！"
                }
            }
        };
    }
    tabPanel.add(tab);
 }

iframe页面里面如果有弹出框，则需要使用window.parent来加入你要新建的window对象，这样就可以跳出iframe显示，同时因为是new出来的，所以所有有关这个对象里面的js对象前面也要加window.parent，top同样也是。

function OpenChildWindow(winID, title, url, width, height, icon) {
    var w = width;
    var h = height;


    if (!w || !h) {
        w = 600;
        h = 400;
    }

    win = new window.parent.Ext.Window({
    //win = new top.Ext.Window({
        id: "w" + winID,
        layout: "fit",
        title: title,
        modal: true,
        iconCls: "#" + icon,
        width: w,
        height: h,
        border: false,
        maximizable: false,
        constrain: true,
        closeAction: "destroy",
        loader: {
            url: url,
            renderer: "frame",
            scripts: true,
            loadMask: {
                showMask: true,
                msg: "Loading..."
            }
        },
        listeners: {
            'resize': function (e) {
                //var imageshow = Ext.get('imageshow').getValue();
                //var imageshow = Ext.fly('imageshow');
                //var maxWd = window.innerWidth;
                //var maxHt = window.innerHeight;
                //var maxWd = document.getElementsByTagName('iframe')[0].contentWindow.document.documentElement.clientWidth;
                //var maxHt = document.getElementsByTagName('iframe')[0].contentWindow.document.body.clientHeight;
                //alert("Height" + maxHt + "------width" + maxWd );
                var prtExt = window.parent.Ext;
                var maxWd = e.width - 10;
                var maxHt = e.height - 30;
                console.log(typeof (maxWd));

                //new Ext.Window({ new出来的写法
                //var h_iframe = document.getElementsByTagName('iframe')[0]//.getElementsByTagName('img');
                //if (typeof (h_iframe) == 'undefined') {
                //    return false;
                //}
                //var HidWidth = document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('HidWidth');
                //var HidHeight = document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('HidHeight');
                //var img_arr = document.getElementsByTagName('iframe')[0].contentWindow.document.getElementsByTagName('img');

                var h_iframe=prtExt.getCmp('wWinCust').iframe;
                if (typeof (h_iframe) == 'undefined') {
                    return false;
                }
                var HidWidth = prtExt.getCmp('wWinCust').iframe.dom.contentWindow.document.getElementById('HidWidth');
                var HidHeight = prtExt.getCmp('wWinCust').iframe.dom.contentWindow.document.getElementById('HidHeight');
             
                var img_arr = window.parent.Ext.getCmp('wWinCust').iframe.dom.contentWindow.document.getElementsByTagName('img');

                HidWidth.value = maxWd;
                HidHeight.value = maxHt;
                console.log(maxWd + "---" + maxHt);

                if (img_arr.length == 0) {
                    return false;
                }
                var h_img;
                var h_id = "imageshow";
                for (var i = 0; i < img_arr.length; i++) {
                    if (img_arr[i].id == h_id)
                    h_img = img_arr[i];
                }

                h_img.width = parseInt(''+ maxWd+'');
                h_img.height = parseInt('' + maxHt + '');
                //console.log(h_iframe);
                console.log(h_img);
            }
        }
    });

    win.show();
}

因为需要对window 窗口的里面的图片进行放大缩小自适应，所以需要操作里面的img对象。操作iframe里面的对象可以参照http://blog.csdn.net/theforever/article/details/6126635

JS获取/设置iframe内对象元素、文档的几种方法
1、IE专用(通过frames索引形象定位)：

document.frames[i].document.getElementById('元素的ID');

2、IE专用(通过iframe名称形象定位)：

document.frames['iframe的name'].document.getElementById('元素的ID');

以上方法，不仅对iframe适用，对frameset里的frame也同样适用。IE虽然擅于自定标准，但不得不说它很多的设计还是比较体现人性化的。比如这个，它在同样支持下面的标准路径之外，提供了一个简洁且形象化的写法。
3、通用方法：
复制代码代码如下:

document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')

注意要加上contentWindow，往往出现问题都是因为这个容易被忽略，它代表frame和iframe内部的窗口对象。
JS获取iframe文档内容

<script type="text/javascript"> 
function getIframeContent(){ //获取iframe中文档内容
var doc;
if (document.all){ // IE 
doc = document.frames["MyIFrame"].document; 
}else{ // 标准
doc = document.getElementById("MyIFrame").contentDocument; 
}
return doc.body.innerHTML;
} 
</script>

注意：上面的 .contentDocument 相当于 .contentWindow.document ！
一、需求与遇到的问题
　　在网站的后台管理中使用了iframe框架布局，包括顶部菜单、左侧导航和主页面。需求是：点击主页面上的一个按钮，在顶部菜单栏的右侧显示“退出”链接，点击可退出系统。
　　我的思路是：在顶部的菜单页面放一个不可见的“退出”链接，当用户点击位于iframe中的主页面（mainPage.htm）中的按钮时，在顶部菜单页面的右侧显示“退出”。
　　我现在遇到的问题是：如何在页面的一个iframe子页面（mainPage.htm）中获取并且操作其它iframe子页面（比如topPage.htm）中的HTML元素？
二、通过JS获取并操作iframe中的元素来解决问题
　　这里主要就是通过JS来操作Window对象。Window 对象表示浏览器中打开的窗口，如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
　　经过我在网上查资料，找到了JS操作iframe中HTML元素的方法。示例如下。

function ShowExit() {
//获取iframe的window对象
var topWin = window.top.document.getElementById("topNav").contentWindow;
//通过获取到的window对象操作HTML元素，这和普通页面一样
topWin.document.getElementById("exit").style.visibility = "visible";
}

说明：第一步，通过window.top.document.getElementById("topNav")方法获取了顶部菜单页面（topPage.htm）所在的iframe对象；第二步，通过上一步获取到的iframe对象的contentWindow属性得到了iframe中元素所在的window对象；第三步，通过上一步获取到的window对象来操作iframe框架中的元素，这和操作不在iframe框架中的普通HTML元素是一样的。

标签

#javascript