让Ext 的Window 弹出iframe

最新推荐文章于 2017-01-11 15:33:37 发布

原创最新推荐文章于 2017-01-11 15:33:37 发布 · 400 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext #UI #window #iframe

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使Ext.Window组件内的iframe内容能够全屏显示的方法，通过自定义Ext.ui.BreakWindow类来实现全屏功能，解决了因内容过多而无法完全显示的问题。

需求：

有时候Window 内容过多无法显示，奈何只能限制与iframe 中

解决思路：

1、先让iframe 先全屏再让window 全屏

兼容缺陷：

支持到Ext3.4.1

firefox chrome 需要修改 iframe 所有父节点 postion 的positon 样式，有可能导致父标签样式显示异常

优点：

完美支持IE

代码如下

Ext.ns('Ext.ui');
/*
 * @config src // iframe url @config firameId // iframe ID @public method
 * {htmlElement getIframe(void)}
 */
Ext.ui.BreakWindow = Ext.extend(Ext.Window, {

			initComponent : function() {
				this.on("hide", this.restoreMax, this);
				Ext.ui.BreakWindow.superclass.initComponent.apply(this, arguments);
			},
			maximized : true,
			restoreMax : function() {
				if (this.iframeEl) {
					var el = this.iframeEl;
					var config = this.restoreConfig;
					if (config) {
						this.restoreRelativeParentNode();
						el.applyStyles({
									position : config.position,
									"z-index" : config['z-index']
								});
						el.setSize(config.width, config.height);

					}

				}
			},
			staticRelativeParentNode : function() {
				var pwin = window.parent;
				var Ext = pwin.Ext;
				if (this.isLowIE()) {
					if (this.restoreConfig.parentNode != Ext.getBody().dom) {
						Ext.getBody().dom.appendChild(this.iframeEl.dom);
					}
					return;
				}

				var start = this.iframeEl.dom.parentNode;
				var rNodes = [];
				this.rNodes = rNodes;
				var el;
				while (start) {
					el = Ext.get(start);
					if (el.getStyle("position") != "static") {
						rNodes.push({
									id : el.id,
									position : el.getStyle("position")
								});
						el.setStyle("position", "static");
					}
					start = start.parentNode;
					if (start.tagName == 'BODY') {
						break;
					}
				}
			},
			restoreRelativeParentNode : function() {
				var pwin = window.parent;
				var Ext = pwin.Ext;
				if (this.isLowIE()) {
					if (this.restoreConfig.parentNode != Ext.getBody().dom) {
						this.restoreConfig.parentNode.appendChild(this.iframeEl.dom);
					}
					return;
				}
				var rNodes = this.rNodes;
				for (var i = 0; i < rNodes.length; i++) {
					Ext.get(rNodes[i].id).setStyle("position", rNodes[i].position);
				}
				// console.dir(parent.document.getElementsByTagName("iframe"));
			},
			isLowIE : function() {
				return Ext.isIE && !Ext.isIE10;
			},
			show : function() {
				var superShow = Ext.ui.BreakWindow.superclass.show;
				var win = window;
				var me = this;
				if (win.parent) {

					var pwin = window.parent;
					var iframes = pwin.document.getElementsByTagName("iframe");
					var iframe
					for (var i = 0; i < iframes.length; i++) {
						if (iframes[i].contentWindow.location.href === win.location.href) {
							iframe = iframes[i];
						}
					}
					if (iframe) {
						var D = pwin.Ext.lib.Dom;
						var w = D.getViewWidth(), h = D.getViewHeight();
						var el = pwin.Ext.get(iframe);
						this.iframeEl = el;
						this.restoreConfig = {
							width : el.getWidth(),
							height : el.getHeight(),
							position : el.getStyle("position"),
							"z-index" : el.getStyle("z-index"),
							parentNode : el.dom.parentNode
						};
						this.staticRelativeParentNode();
						el.applyStyles({
									position : 'absolute',
									top : 0,
									left : 0,
									"background-color" : 'white',
									"z-index" : 2000
								});
						el.setSize(w, h);
						superShow.apply(this, arguments);
					}

				} else {
					superShow.apply(this, arguments);
				}

			}

		});

Ext.reg('breakwindow', Ext.ui.BreakWindow);