|
|
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()
|
|
|
}
|
|
|
}
|
