白鹭Egret实现WeView

/**
 * 还需要适配相应的屏幕适配方案
 */
class WebView extends egret.DisplayObjectContainer {
 
    private _x:number=0;
    private _y:number=0;
    private _width:number=0;
    private _height:number=0;
    private _src:string="";
 
    private _scaleMode:string=egret.MainContext.instance.stage.scaleMode;
    private _stageWidth:number;
    private _stageHight:number;
    private _windowWidth:number;
    private _windowHight:number;
    private _displayHight:number;
    private _displayWidth:number;
    private _designHight:number;
    private _designWidth:number;
 
    private _wrapper:HTMLDivElement=null;
    private _iframe:HTMLIFrameElement=null;
 
    public constructor(src:string){
        super();
 
        var delegate:HTMLElement=document.getElementById("StageDelegateDiv"),playerContainer:HTMLElement=delegate.parentElement;
        var wrapperDom=document.getElementById("iframe-wrapper");
        if(!wrapperDom){
            wrapperDom=document.createElement("div");
            wrapperDom.style.display="none";
            wrapperDom.attributes['style'].value+='position:absolute;-webkit-overflow-scrolling: touch;overflow-y: scroll;';
            wrapperDom.id="iframe-wrapper";
            delegate.appendChild(wrapperDom);
        }
        this._wrapper=<HTMLDivElement>wrapperDom;
        this._wrapper.style.display="none";
        this._wrapper.style.opacity="0";
 
        var iframe = document.createElement("iframe"),t=new Date().getTime();
        iframe.src=src;
        iframe.id="webview-iframe-"+t;
        iframe.name="webview-iframe-"+t;
        iframe.style.position="absolute";
        iframe.style.top="0";
        iframe.style.left="0";
        iframe.style.opacity="0";
        iframe.style.display='none';
        iframe.frameBorder='0';
        iframe.border="0";
        this._wrapper.appendChild(iframe);
 
        this._iframe=<HTMLIFrameElement>document.getElementById("webview-iframe-"+t);
        var self=this;
        this._iframe.onload=function(){
            self._wrapper.style.opacity="1";
            self._iframe.style.opacity="1";
        }
 
        this._stageWidth=egret.MainContext.instance.stage.stageWidth;
        this._stageHight=egret.MainContext.instance.stage.stageHeight;
        this._windowWidth=window.innerWidth;
        this._windowHight=window.innerHeight;
        this._designHight=parseInt(playerContainer.attributes['data-content-height'].value);
        this._designWidth=parseInt(playerContainer.attributes['data-content-width'].value);
 
        var stageSize = egret.sys.screenAdapter.calculateStageSize(egret.MainContext.instance.stage.scaleMode, this._windowWidth, this._windowHight, this._designWidth, this._designHight);
        this._displayHight=stageSize.displayHeight;
        this._displayWidth=stageSize.displayWidth;
    }
 
    public show():void {
        this._iframe.style.display='block';
        this._wrapper.style.display='block';
    }
 
    public destroy():void {
        if(this._iframe){
            this._wrapper.style.display="none";
            this._wrapper.removeChild(this._iframe);
        }
    }
 
    public getWidth():number {
        return this._width;
    }
 
    public setWidth(value:number) {
        this._width = value;
        if(this._scaleMode==egret.StageScaleMode.FIXED_WIDTH || this._scaleMode==egret.StageScaleMode.FIXED_HEIGHT ){
            this._iframe.width=this._width/this._stageWidth*this._windowWidth+"px";
            this._wrapper.style.width=this._width/this._stageWidth*this._windowWidth+"px";
        }
        if(this._scaleMode==egret.StageScaleMode.SHOW_ALL || this._scaleMode==egret.StageScaleMode.NO_BORDER ) {
            if(this._windowWidth==this._displayWidth){
                this._iframe.style.width = this._width / this._stageWidth * this._windowWidth + "px";
                this._wrapper.style.width = this._width / this._stageWidth * this._windowWidth + "px";
            }else{
                this._iframe.style.width = this._width / this._stageWidth * this._displayWidth + "px";
                this._wrapper.style.width = this._width / this._stageWidth * this._displayWidth + "px";
            }
        }
    }
 
    public getHeight():number {
        return this._height;
    }
 
    public setHeight(value:number) {
        this._height = value;
        if(this._scaleMode==egret.StageScaleMode.FIXED_WIDTH || this._scaleMode==egret.StageScaleMode.FIXED_HEIGHT ) {
            this._iframe.height=this._height/this._stageHight*this._windowHight+"px";
            this._wrapper.style.height=this._height/this._stageHight*this._windowHight+"px";
        }
        if(this._scaleMode==egret.StageScaleMode.SHOW_ALL || this._scaleMode==egret.StageScaleMode.NO_BORDER ) {
            if(this._windowHight==this._displayHight){
                this._iframe.style.height = this._height / this._stageHight * this._windowHight + "px";
                this._wrapper.style.height = this._height / this._stageHight * this._windowHight + "px";
            }else{
                this._iframe.style.height = this._height / this._stageHight * this._displayHight + "px";
                this._wrapper.style.height = this._height / this._stageHight * this._displayHight + "px";
            }
        }
    }
 
    public setX(value:number) {
        this._x = value;
        if(this._scaleMode==egret.StageScaleMode.FIXED_WIDTH   || this._scaleMode==egret.StageScaleMode.FIXED_HEIGHT) {
            this._wrapper.style.left = this._x / this._stageWidth * this._windowWidth + "px";
        }
        if(this._scaleMode==egret.StageScaleMode.SHOW_ALL || this._scaleMode==egret.StageScaleMode.NO_BORDER ) {
            if(this._windowWidth==this._displayWidth){
                this._wrapper.style.left = this._x / this._stageWidth * this._windowWidth + "px";
            }else{
                this._wrapper.style.left = this._x / this._stageWidth * this._displayWidth + "px";
            }
        }
    }
 
    public setY(value:number) {
        this._y = value;
        if(this._scaleMode==egret.StageScaleMode.FIXED_WIDTH  || this._scaleMode==egret.StageScaleMode.FIXED_HEIGHT ) {
            this._wrapper.style.top = this._y / this._stageHight * this._windowHight + "px";
        }
        if(this._scaleMode==egret.StageScaleMode.SHOW_ALL || this._scaleMode==egret.StageScaleMode.NO_BORDER){
            if(this._windowHight==this._displayHight){
                this._wrapper.style.top = this._y / this._stageHight * this._windowHight + "px";
            }else{
                this._wrapper.style.top =this._y / this._stageHight * this._displayHight + "px";
            }
        }
    }
 
    public getX():number {
        return this._x;
    }
 
    public getY():number {
        return this._y;
    }
 
    public getSrc():string {
        return this._src;
    }
 
    public setSrc(value:string) {
        this._src = value;
    }
}