iframe 框架模块

作者:root
功能:加载其他页面的js代码。作为富文本编辑器 及 上传管理的面板。

/*
 *cfg{width:,height,src,hide,css}
 * cfg.src 如果设置,iframe 框架 将被隐藏,start()参数 url 设置,将显示iframe。
 * */
frameBox = function(cfg){
	w=cfg.width,h=cfg.height,sizeTag=0,src=cfg.src||null,css=cfg.css||'sam';
    if(src && HOST)HOST._plug['ExecCommand'].COMMANDS.createimg=(function(){this.start();}).bind(this);
};
frameBox.prototype ={
	name:'frameBox',
	p:'',
	start:function(url=null){if(this.p=='')this.init(url);else this.show();},
	bd:null,
	hd:null,
	ft:null,
	selectfiles:null, 
	init:function(url)
  	{		 
		var panel = this.strToNodes('<div  class="yui3-panel yui3-panel-content" style="position: fixed; height: '+h+';width: '+w+';"><div class="yui3-widget-hd"><span>&nbsp;</span><span class="yui3-widget-buttons" >'+
            '<button style="cursor:pointer;" class="yui3-button yui3-button-resize" type="button" name="resize"></button>'+
            '<button style="cursor:pointer;" class="yui3-button yui3-button-close" type="button" name="close">close</button></span></div><div class="yui3-widget-bd" style="padding:8px;"></div></div>'),
	  	    xy,hd,iframe = document.createElement('iframe'); 
        iframe.src= src||url;
		document.body.classList.add('yui3-skin-'+css);
		this.p=document.body.appendChild(panel);
        this.p.querySelector('.yui3-button-close').addEventListener('click',this.hide.bind(this));
        this.p.querySelector('.yui3-button-resize').addEventListener('click',this._reSize.bind(this));
		this.hd=this.p.querySelector('.yui3-widget-hd');
		this.bd=this.p.querySelector('.yui3-widget-bd');
		this.bd.style.overflow='auto';
		if(src){/* 是否隐藏 */
			this.ft=this.p.appendChild(this.strToNodes('<div class="yui3-widget-ft" ><span class="yui3-widget-buttons"><button name="updata" class="yui3-button"> 刷新 </button></span></div>'));
			this.hd.appendChild(iframe).style.cssText ='width: 0;height:0;left:-999';
			this.selectfiles=this.strToNodes('<span style="cursor:pointer;" id="selectfiles">选择文件</span>');
			this.hd.replaceChild(this.selectfiles,this.hd.firstChild);
		}else{ 
			this.bd.style.padding=0;
			this.bd.appendChild(iframe).style.cssText ='border:0;width: 100%;';
		}
		this.p.addEventListener('reSize',this._setCenter.bind(this,this.p));
		this.p.addEventListener('reSize',this._changeFmHeight.bind(this,iframe,this.hd));
		this._changeFmHeight(iframe,this.hd);
		this._boxMove(this.p,this.hd);
	 	this._setCenter(this.p);
	},
	setTitle(s){
		var n = this.strToNodes('<span>'+s+'</span>');
		this.hd.replaceChild(n,this.hd.firstChild);
	},
	hide : function(){this.p.style.display='none';},
	show:function(){this.p.style.display='block';},
	_reSize:function(){
        sizeTag = !sizeTag; 
        if(sizeTag){
            this.p.style.width='96%';
            this.p.style.height=document.documentElement.clientHeight-5+'px';
        }else{
            this.p.style.width = w;
            this.p.style.height = h;
        }
		this.fire(this.p,'reSize');
    },
	_setCenter : function(n){
            n.style.left = Math.floor((document.body.offsetWidth - n.offsetWidth)/2)+'px';
			n.style.top = '50px';
			if(sizeTag)n.style.top = '1px';
   	},
	_changeFmHeight:function(iframe,hd){
	   	if(src)this.bd.style.height=this.p.offsetHeight-this.hd.offsetHeight-this.ft.offsetHeight-18+'px';
		var h = iframe.offsetHeight;
		iframe.height=this.p.offsetHeight-this.hd.offsetHeight-3+'px';
		h = iframe.offsetHeight-h;
		this.fire(iframe.contentWindow.document,'reSize',{'reHeight':h});
	},
	_boxMove:function(n,hd){
			var m,x,y;
			hd.addEventListener('mousedown',function(e){m=1;x=e.clientX-n.offsetLeft;y=e.clientY-n.offsetTop;});	
			document.addEventListener('mouseup',function(e){m=0;x=0;y=0;});
			hd.addEventListener('mousemove',function(e){if(m){n.style.left=e.clientX-x+'px';n.style.top=e.clientY-y+'px'}});
  	},
	strToNodes:function (arg) { 
   	var objE = document.createElement("div"); 
   	objE.innerHTML = arg; 
   	return objE.childNodes[0]; 
  	},
	_getScrollTop:function(){    
    	var h=0,etop=document.documentElement.scrollTop;    
    	if(document.documentElement&&etop){    
       	 	h=etop;    
    	}else if(document.body){    
        	h=document.body.scrollTop;    
    	}    
    	return h;    
	},
	fire:function(n,e,o={},canBubble=false,cancelable=false){
		var evt = document.createEvent("HTMLEvents");
		evt.initEvent(e, canBubble, cancelable);
		Object.assign(evt,o);
		n.dispatchEvent(evt);
		return evt;
	}
};