白鹭Egret实现WeView

it2025-12-15  8

/** * 还需要适配相应的屏幕适配方案 */ 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; } }

 

最新回复(0)