im-system/im-uniapp/common/browser.js

export default {
	init: function(options) {
		this.initWebview(options)
		this.handleEvent()
		return this
	},
	initWebview: function(options) {
		var hh=plus.screen.height-44
		var _self = this
		_self.webview = plus.webview.create('', 'browser', {
			scalable:true,
			height:hh+'px',
			bottom:'44px',
			background:'#ff5500',
			titleNView: {
				backgroundColor: '#FFFFFF',
				progress: { //进度条
					color: '#4678e7',
					height: '3px'
				},
				splitLine: { //底部分割线
					color: '#cccccc',
					height: '1px'
				},
				buttons: [{ //关闭按钮
					'float': 'left',
					fontSrc: '/static/uni.ttf',
					text: '\ue460',
					onclick: _self.close.bind(_self)
				}, { //更多按钮
					'float': 'right',
					fontSrc: '/static/uni.ttf',
					text: '\ue507',
					onclick: _self.more.bind(_self)
				}]
			},
			additionalHttpHeaders: options.headers || {}
		})
		// 配置下拉刷新
		_self.webview.setPullToRefresh({
			support: true
		}, 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+48,
					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()
			}
		})

		//监听页面变化
		_self.webview.addEventListener('loaded', function() {
			_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('\ue470', {
							left: left,
							height: '100%'
						}, {
							color: '#000000',
							fontSrc: '/static/uni.ttf',
							size: '24px'
						}, 'forward')
					} else {
						_self.navBottom.drawText('\ue470', {
							left: left,
							height: '100%'
						}, {
							color: '#EEEEEE',
							fontSrc: '/static/uni.ttf',
							size: '24px'
						}, 'forward')
					}
					if (!canBack && !event.canForward) {
						// _self.navBottom.hide()
					}
				})
			})
			_self.navBottom.show()
		}, false)
	},
	handleEvent: function(url) {
		var _self = this
		plus.key.addEventListener('backbutton', function() {
			_self.close()
			return
			var topWebview = plus.webview.getTopWebview()
			// 不等于浏览器窗口
			if (topWebview.id !== 'browser') {
				// 这里除了浏览器窗口就是首页了，直接退出了；
				plus.runtime.quit()
			} else {
				_self.back()
			}
		})
	},
	show: function(url) {
		url = url || 'https://www.baidu.com'
		this.webview.loadURL(url)
		this.webview.show('slide-in-right')
	},
	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() {
		// 刷新
		this.webview.reload(true)
	},
	back: function() {
		//后退
		var _self = this
		_self.webview.canBack(function(event) {
			if (event.canBack) {
				_self.webview.back()
			} else {
				_self.close()
			}
		})
	},
	forward: function() {
		//前进
		var _self = this
		_self.webview.canForward(function(event) {
			if (event.canForward) {
				_self.webview.forward();
			} else {
				plus.nativeUI.toast('没有可前进的地址')
			}
		})
	},
	close: function() {
		//关闭
		// this.navBottom.hide()
		this.navBottom.close()
		this.navBottom=null;
		this.webview.close('browser', 'slide-out-right')
		this.webview.clear()
		plus.key.removeEventListener("backbutton", function() {
		});
	}
}