问题
uni-app-x的webview组件貌似少了很多的接口,其中就包括获取网页信息,包括dom节点等等
思路
当webview加载完毕之后使用webview上下文向页面注入uni.webview.1.5.5.js代码,然后再注入一段操作dom的js代码,并将结果通过postmessage接口传回uts。话不多说,直接上代码
<template>
<web-view id="web-view" :src="url" :webview-styles="styles" @load="Load" @message="Message"></web-view>
</template>
<script>
let fs = uni.getFileSystemManager()
export default {
data() {
return {
url: '',
src: '',
styles: { progress: { color: "#07C160" } },
webviewContext: null as WebviewContext | null,
javascriptString: `
!function(document) {
var title = document.title;
uni.webView.postMessage({
data: {
documentTitle: title
}
})
}(document)
`
};
},
onLoad(options : OnLoadOptions) {
// 接受url参数
this.url = options["url"] ?? ""
},
onReady() {
// 创建webview上下文对象
this.webviewContext = uni.createWebviewContext('web-view', this)
},
methods: {
Load(e : UniWebViewLoadEvent) {
// 页面重新加载时获取页面链接地址
this.src = e.detail.src
// 读取库文件内容
fs.readFile({
encoding: 'utf-8',
filePath: '/hybrid/html/uni.webview.1.5.5.js',
success: (res : ReadFileSuccessResult) => {
// 将库文件代码和执行代码注入到网页
this.webviewContext?.evalJS(res.data + this.javascriptString)
}
} as ReadFileOptions)
},
// 接收网页传入的消息
Message(e : UniWebViewMessageEvent) {
let documentTitle = e.detail.data[0]['documentTitle'] as string
if (documentTitle == '') {
documentTitle = this.src
}
// 设置网页标题
uni.setNavigationBarTitle({
title: documentTitle
})
}
}
}
</script>
<style lang="scss">
</style>
2 个评论
要回复文章请先登录或注册
你曾经说过
9***@qq.com