1***@qq.com
1***@qq.com
  • 发布:2024-07-19 14:20
  • 更新:2024-10-30 19:53
  • 阅读:309

uni-app-x webview组件不支持获取网页内容解决方案

分类:uni-app x

问题

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>
1 关注 分享
Neemor

要回复文章请先登录注册

你曾经说过

你曾经说过

測試可以,感謝!
2024-10-30 19:53
9***@qq.com

9***@qq.com

设置log看了下, success进去了,但是postmessage好像没有成功,message里的log打不出来
2024-08-22 20:01