window弹出框在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元素是一样的。