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元素是一样的。