iframe中单击关闭父页面中的菜单

最新推荐文章于 2024-09-05 14:49:26 发布

qq_20048233

最新推荐文章于 2024-09-05 14:49:26 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/qq_20048233/article/details/51023964

版权

最近工作中遇到一个问题，其实做出来了发现不麻烦，但搞了好几填，就记录下来和大家分享下，具体的问题是公司前端使用的是extjs，当系统界面通过导航栏中菜单绑定事件加入的tabpanel里的页面都是iframe方式加入的，然而这里的iframe具体界面是我无法改动的，想要完成的功能就是在这些iframe界面中点击时能关闭掉菜单。具体实现如下：

addContentPanel这个方法就是调用此方法增加菜单里绑定的事件方法，通过此方法加入panel页面，而iframe中的页面是通过url传进来的，这里的iframe具体的页面我其实是无法改动的，所以要在iframe里操作父页面就需要先获取iframe对象，所以我在整个panel渲染完毕后，再获取该对象，然后在iframe.onload事件后获得当前iframe的文档对象：var obj=iframe.contentWindow.document.documentElement; 在obj的click事件中调用父页面里的方法就可以对父页面进行操作了，代码中的test方法就是父页面里我自己写的方法，谢谢观看！

function addContentPanel(title,tabId,url,param,isHiden){
		var tab = Ext.getCmp('_contentTabPanel');
		var panel = Ext.getCmp(tabId);
		var iframeId = "IFRAME"+tabId;
		//var child = document.getElementById(iframeId).contentWindow;
		console.info(url);
		if(Ext.isEmpty(panel)){
			panel =  Ext.create('Ext.Panel', {
				id:tabId,
				title:'<span  style="color:#000000">'+title+'</span>',
				closable : true,
				bodyStyle: 'background:#FFFFFF;',
				margin: '0 0 0 1',
				listeners:{
					beforeclose:function(panel, eOpts){           
						panel.destroy();  
					},
			    	close:function(panel, eOpts){
			    		var iFrame = document.getElementById('IFRAME'+tabId);
					    if(!!iFrame&&!!iFrame.contentWindow.saveInfo){
							 iFrame.contentWindow.saveInfo();
						}
			    	}
			    },
			    
				defaults: {autoScroll:false},
				html : '<IFRAME name="IFRAME'+tabId+'" id="IFRAME'+tabId+'"  width="100%" height="99%" frameborder="0" 
				scrolling="no" src="'+url+'" border=0 ></IFRAME>'
			});
			console.info("iframeid");
			panel.on({
				afterrender:{
					fn:function(){
						var iframe = document.getElementById(iframeId);
						console.info(iframe);
						iframe.onload = function(){ 
							var obj=iframe.contentWindow.document.documentElement;
							
							obj.οnclick=function(e){
								//oEvent=e||event;
								//obj.mouseStart={};
								//obj.mouseStart.x=oEvent.clientX;
								//obj.mouseStart.y=oEvent.clientY;
								//console.info(obj.mouseStart.x);
								window.parent.test();
							};  
							//window.parent.test();
						}
					},
					scope: panel
				}
			});
			tab.add(panel);
		}
		top.topoParam = param;
		if(!!isHiden&&isHiden){
		  
		}else{
		  panel.show();
		}
		
 }