<template>
|
<uni-web-view v-on="$listeners" />
|
</template>
|
<script>
|
import {
|
WEBVIEW_INSERTED,
|
WEBVIEW_REMOVED,
|
WEBVIEW_ID_PREFIX
|
} from '../../../constants'
|
|
import { NAVBAR_HEIGHT } from 'uni-helpers/constants'
|
|
let webview = false
|
const insertHTMLWebView = ({
|
webviewStyles,
|
htmlId,
|
updateTitle
|
}) => {
|
const parentWebview = plus.webview.currentWebview()
|
// fixed by hxy web-view 组件所在的 webview 不注入 uni-app 框架
|
const styles = Object.assign(
|
{
|
'uni-app': 'none',
|
isUniH5: true,
|
// ios 默认绘制到安全区外
|
contentAdjust: false
|
},
|
webviewStyles
|
)
|
const parentTitleNView = parentWebview.getTitleNView()
|
if (parentTitleNView) {
|
if (plus.navigator.isImmersedStatusbar()) {
|
styles.top = NAVBAR_HEIGHT + plus.navigator.getStatusbarHeight()
|
} else {
|
styles.top = NAVBAR_HEIGHT
|
}
|
styles.bottom = 0
|
}
|
webview = plus.webview.create('', htmlId, styles)
|
if (parentTitleNView) {
|
webview.addEventListener('titleUpdate', function () {
|
if (!updateTitle) return
|
const title = webview.getTitle()
|
parentWebview.setStyle({
|
titleNView: {
|
// iOS titleText 为空字符串时 按钮会隐藏
|
titleText: (!title || title === 'null') ? ' ' : title
|
}
|
})
|
})
|
}
|
plus.webview.currentWebview().append(webview)
|
}
|
|
const updateHTMLWebView = ({
|
src,
|
webviewStyles
|
}) => {
|
// fixed by xxx 非空时才执行更新操作
|
const realPath = src || ''
|
if (!realPath) {
|
return
|
}
|
if (/^(http|https):\/\//.test(realPath) && webviewStyles.progress) {
|
webview.setStyle({
|
progress: {
|
color: webviewStyles.progress.color
|
}
|
})
|
}
|
webview.loadURL(realPath)
|
}
|
|
const removeHTMLWebView = () => {
|
plus.webview.currentWebview().remove(webview)
|
webview.close('none')
|
webview = false
|
}
|
|
export default {
|
name: 'WebView',
|
props: {
|
src: {
|
type: String,
|
default: ''
|
},
|
updateTitle: {
|
type: Boolean,
|
default: true
|
},
|
webviewStyles: {
|
type: Object,
|
default () {
|
return {}
|
}
|
}
|
},
|
watch: {
|
src (val, oldVal) {
|
webview && updateHTMLWebView({
|
src: this.$getRealPath(val),
|
webviewStyles: this.webviewStyles
|
})
|
}
|
},
|
mounted () {
|
this.htmlId = WEBVIEW_ID_PREFIX + this.$page.id
|
insertHTMLWebView({
|
webviewStyles: this.webviewStyles,
|
htmlId: this.htmlId,
|
updateTitle: this.updateTitle
|
})
|
updateHTMLWebView({
|
src: this.$getRealPath(this.src),
|
webviewStyles: this.webviewStyles
|
})
|
UniViewJSBridge.publishHandler(WEBVIEW_INSERTED, {}, this.$page.id)
|
},
|
beforeDestroy () {
|
removeHTMLWebView()
|
UniViewJSBridge.publishHandler(WEBVIEW_REMOVED, {}, this.$page.id)
|
}
|
}
|
</script>
|
<style>
|
uni-web-view {
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
}
|
</style>
|
