uniapp webview web-view组件监听网页变革 url变革 与网页通讯 ...

uniapp webview web-view组件监听网页变革 url变革 与网页通讯

需求是在app页面内嵌套自己的h5 或者别人的h5 切换页面时候获取到网页的变革 url的变更
第一种方法就是利用 html5+的方法

1. //html部分
2. <web-view :src="webviewPath" class="webview" height="100%" :webview-styles="{width:'100%',height:'100%'}"
3.                         id="webview" ></web-view>
4. //js部分       
5. <script>
6. export default {
7. onReady() {
8. // 获取当前Webview窗口对象
9.                         const ws = plus.webview.currentWebview();
10.                         var currentWebview = this.$scope.$getAppWebview()
11.                         setTimeout(() => {
12.                         let wv = currentWebview.children()[0];
13.                         _this.ws.loadURL(_this.webviewPath) //加载h5链接
14.                         // 监听窗口触屏事件
15.                                 _this.ws.addEventListener('touchstart', function(e) {
16.                                         setTimeout(() => {
17.                                                 let orderUrl = _this.ws.getURL() //页面链接
18.                                                 const wsTitle = _this.ws.getTitle() //页面标题
19.                                                 console.log(_this.ws.getTitle())
20.                                                 console.log(orderUrl)
21.                                                 console.log('touchstart');
22.                                         }, 100)
24.                                 }, false);
25.                                 _this.ws.onloaded = () => {
26.                                         let orderUrl = _this.ws.getURL()
27.                                         console.log('onloaded事件加载完成', orderUrl)
28.                                 };
29.                         },1000)//如果是页面初始化调用时，需要延时一下
30. }
31. }
32. </script>

复制代码

第二种方法就是利用 html5+的方法 和uniapp的 uni.webview.js

利用uni.webview.js 就可以实现h5和app通讯了，想要h5的任何数据都用通过 uni.webView.postMessage来通报给
app

1. //html部分
2. <web-view :src="webviewPath" class="webview" height="100%" :webview-styles="{width:'100%',height:'100%'}"
3.                         id="webview" @message="receiveMsg"></web-view>
4.         methods: {
5.                         wsEvalJs() {
6.                                 // 在webview加载完成后，注入JavaScript代码
7.                                 this.ws.evalJSSync(`
8.                                        var script = document.createElement('script');
9.                                        script.src = 'https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js';
10.                                        document.body.appendChild(script);
11.                                                          document.addEventListener("UniAppJSBridgeReady", function() {
12.                                                            console.log("初始化uniapp的API成功");
13.                                                                  uni.webView.postMessage({ data: { type: "href",href:window.location.href,msg:"获取页面url" } });
14.                                                          });
15.                                       `);
16.                         },
17.                                 //接收wenview h5的消息
18.                         receiveMsg(option){
19.                                 console.log('接收到的消息参数'+JSON.stringify(option))
20.                                
21.                         },
22.                         }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。