palletApp/js_sdk/ww-browser/libs/browser.js

export default {
	init: function(options) {
		this.initWebview(options)
		this.handleEvent()
		return this
	},
	initWebview: function(options) {
		var _self = this
		_self.webview = plus.webview.create('', 'browser', {
			'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
			titleNView: {
				backgroundColor: '#007aff',
				titleColor:'#FFFFFF',
				progress: { //进度条
					color: '#4678e7',
					height: '3px'
				},
				splitLine: { //底部分割线
					color: '#cccccc',
					height: '1px'
				},
				buttons: [
				{ //关闭按钮
					'float': 'left',
					fontSrc: '/static/font.ttf',
					text: '×',
					onclick: _self.close.bind(_self)
				}, 
				{ //更多按钮
					'float': 'right',
					fontSrc: '/static/font.ttf',
					text: '…',
					onclick: _self.more.bind(_self)
				}],
				titleText: '舾装办公'
			},
			additionalHttpHeaders: options.headers || {}
		})
		// 配置下拉刷新
		/*_self.webview.setPullToRefresh({
			support: false
		}, function() {
			_self.reload()
			var titleUpdate = function() {
				setTimeout(function() {
					_self.webview.endPullToRefresh()
					_self.webview.removeEventListener('titleUpdate', titleUpdate)
				}, 300)
			};
			_self.webview.addEventListener('titleUpdate', titleUpdate)
		})*/
		
		//绘制返回前进按钮
		/*this.navBottom = new plus.nativeObj.View("navBottom", { 
			bottom: '0px', left: '0px', height: '44px', width: '100%', backgroundColor: 'rgb(255,255,255)'
		})*/
		var screenWidth = plus.screen.resolutionWidth
		var left = screenWidth / 4
		/*this.navBottom.draw([
			{
				tag: 'font',
				id: 'back',
				text: '\ue471',
				textStyles: {
					fontSrc: '/static/uni.ttf',
					size: '24px',
					color: '#000000'
				},
				position:{
					right: left,
					height:'100%',
				}
			},
			{
				tag: 'font',
				id: 'forward',
				text: '\ue470',
				textStyles: {
					fontSrc: '/static/uni.ttf',
					size: '24px',
					color: '#000000'
				},
				position:{
					left: left,
					height:'100%',
				}
			}
		])*/
		
		//点击前进或后退
		/*this.navBottom.addEventListener("click", (e) => { 
			if (e.clientX > left && e.clientX < (left + 24)) {
				_self.back()
			}
			if(e.clientX > (screenWidth - left - 12) && e.clientX < (screenWidth - left + 12)){
				_self.forward()
			}
		})*/
		
		//var wv;
		//var currentWebview = _self.webview;
		//console.log(currentWebview);  
		//setTimeout(function() {  
		//    wv = currentWebview.children()[0]
		//	console.log(wv);    
		//    //console.log(wv.getStyle());  
		//    wv.setStyle({scalable:true})  
		//}, 1000);
 
		//监听页面变化
		 
		_self.webview.addEventListener('loaded', function(){
			//视频满屏播放设置
			if (uni.getSystemInfoSync().platform == 'android') {
				var el = _self.webview.webkitFullscreenElement; //获取全屏元素
				if(el) {  
				    plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏  
				} else {  
				    plus.screen.unlockOrientation(); //解除屏幕方向的锁定  
				}  
			}
			else if (uni.getSystemInfoSync().platform == 'ios') {
				// iOS平台的视频全屏旋转  
				// 监听的事件与Android平台有很大区别
				_self.webview.addEventListener('webkitbeginfullscreen', function() {  
				    plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏  
				});  
				_self.webview.addEventListener('webkitendfullscreen', function() {  
				    plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏  
				});  
			}
			
			_self.webview.canBack(function(event) {
				var canBack = false
				if(event.canBack) {
					canBack = true
					//_self.navBottom.show()
				}else{
					canBack = false
				}
				// _self.webview.canForward(function(event) {
				// 	if(event.canForward) {
				// 		_self.navBottom.drawText('\ue6a3', {left: left, height:'100%'}, {color:'#000000', fontSrc: '/static/uni.ttf', size: '24px'}, 'forward')
				// 	}else{
				// 		_self.navBottom.drawText('\ue679', {left: left, height:'100%'}, {color:'#EEEEEE', fontSrc: '/static/uni.ttf', size: '24px'}, 'forward')
				// 	}
				// 	if(!canBack && !event.canForward){
				// 		_self.navBottom.hide()
				// 	}
				// })
			});
			
			// 涉及到5+API的内容，均在plusready事件后调用；  
			// document.addEventListener('plusready', function() {  
			//     var osName = plus.os.name;  
			//     if (uni.getSystemInfoSync().platform == 'android') {
			//         fullScreenOfAndroid();  
			//     } if (uni.getSystemInfoSync().platform == 'ios') {
			//         var videoElem = document.getElementById('video');  
			//         fullScreenOfIos(videoElem);  
			//     }  
			// });
 
		// 	//视频满屏播放设置
		// 	if (uni.getSystemInfoSync().platform == 'android') {
		// 		var self = plus.webview.currentWebview();  
		// 		self.addEventListener('webkitfullscreenchange', function() {  
		// 		    var el = self.webkitFullscreenElement; //获取全屏元素  
		// 		    if(el) {  
		// 		        plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏  
		// 		    } else {  
		// 		        plus.screen.unlockOrientation(); //解除屏幕方向的锁定  
		// 		    }  
		// 		});
		// 	}
		// 	else if (uni.getSystemInfoSync().platform == 'ios') {
		// 		var videoElem = plus.webview.currentWebview();
		// 		// iOS平台的视频全屏旋转  
		// 		// 监听的事件与Android平台有很大区别
		// 		videoElem.addEventListener('webkitbeginfullscreen', function() {  
		// 		    plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏  
		// 		});  
		// 		videoElem.addEventListener('webkitendfullscreen', function() {  
		// 		    plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏  
		// 		});  
		// 	}
		
		
		}, false);
 
	},
	onReady: function() {
		// var wv=this.webview;
		// // #ifdef APP-PLUS
		// var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
		// setTimeout(function() {
		//     wv = currentWebview.children()[0]
		//     wv.setStyle({scalable:true})
		// }, 1000); //如果是页面初始化调用时，需要延时一下
		// // #endif 
		 
		
	},
	handleEvent: function(url) {
		var _self = this
		plus.key.addEventListener('backbutton', function() {
			
			var topWebview = plus.webview.getTopWebview();
			//console.log(topWebview);
			// 不等于浏览器窗口
			if(topWebview === undefined || topWebview === null || topWebview.id !== 'browser') {
				// 这里除了浏览器窗口就是首页了，直接退出了；
				//不能直接退出，跳转到首页
				//plus.runtime.quit();
				//uni.navigateBack({
				//   delta: 1
				//});

				//uni.switchTab({
				//	url:'/pages/index/index'
				//});
				_self.close();
			} else {
				_self.back()
			}
		});
	},
	show: function(url) {
		url = url || 'https://jd-appimg.spacecig.com/hybrid/html/load.html'
		this.webview.loadURL(url)
		this.webview.show('slide-in-right')
	},
	back: function() {
		// 后退
		var _self = this
		_self.webview.canBack(function(event) {
			if(event.canBack) {
				_self.webview.back()
			} else {
				_self.close()
			}
		})
	},
	more: function(){
		var _self = this
		uni.showActionSheet({
			itemList: ['刷新', '浏览器打开'],
			success: function (res) {
				if(res.tapIndex == 0){
					_self.reload()
				}else if(res.tapIndex == 1){
					plus.runtime.openURL(_self.webview.getURL())
				}
			}
		})
	},
	reload: function(ifload){
		this.webview.reload(true)
	},
	forward: function(){
		//前进
		var _self = this
		_self.webview.canForward(function(event) {
			if(event.canForward) {
				_self.webview.forward();
			} else {
				plus.nativeUI.toast('没有可前进的地址')
			}
		})
	},
	close: function(){
		//关闭
		//this.navBottom.close()
		this.webview.close('browser', 'slide-out-right')
		this.webview.clear()
	}
}