uniapp监听webview地址变化

### 实现 UniApp 监听 WebView URL 变化的方法 在 UniApp 中实现监听 WebView 地址变化的功能，可以通过结合 HTML5+ 的 API 和 `webview` 组件的事件监听机制来完成。以下是具体实现方法： #### 方法一：使用 HTML5+ 的 `plus.webview` 对象 通过获取当前 WebView 窗口对象并监听其触屏事件或加载完成事件，可以实时捕获 URL 的变化。 ```html <template> <view> <web-view :src="webviewPath" class="webview" height="100%" :webview-styles="{width:'100%',height:'100%'}" id="webview"></web-view> </view> </template> <script> export default { data() { return { webviewPath: 'https://example.com' // 初始化 WebView 加载地址 }; }, onReady() { const ws = plus.webview.currentWebview(); // 获取当前 Webview 窗口对象 const currentWebview = this.$scope.$getAppWebview(); setTimeout(() => { const wv = currentWebview.children()[0]; // 获取子 Webview this.ws.loadURL(this.webviewPath); // 加载 H5 链接 // 监听窗口触屏事件 this.ws.addEventListener('touchstart', () => { setTimeout(() => { const orderUrl = this.ws.getURL(); // 获取当前页面链接 console.log('当前 URL:', orderUrl); }, 100); }, false); // 监听页面加载完成事件 this.ws.onloaded = () => { const orderUrl = this.ws.getURL(); console.log('页面加载完成，当前 URL:', orderUrl); }; }, 1000); // 如果是页面初始化调用时，需要延时一下 } }; </script> ``` 上述代码中，`plus.webview.currentWebview()` 用于获取当前的 Webview 对象[^1]，并通过 `addEventListener` 和 `onloaded` 事件监听 URL 的变化和页面加载完成的状态。 --- #### 方法二：使用 `loaded` 事件监听页面加载完成 通过监听 `loaded` 事件，可以在页面加载完成后获取当前的 URL 和标题。 ```html <template> <view> <web-view :src="url"></web-view> </view> </template> <script> export default { data() { return { url: 'https://example.com' }; }, onReady() { const currentWebview = this.$scope.$getAppWebview(); const wv = currentWebview.children()[0]; wv.addEventListener('loaded', () => { console.log('页面加载完成，当前 URL:', wv.getURL()); console.log('页面标题:', wv.getTitle()); }, false); } }; </script> ``` 此方法通过 `wv.addEventListener('loaded')` 监听页面加载完成事件，并在回调函数中获取当前的 URL 和标题[^2]。 --- #### 方法三：通过 `@message` 事件实现双向通讯 如果需要更复杂的交互，可以通过 `@message` 事件实现 H5 页面与 UniApp 的双向通讯。 ```html <template> <view> <web-view @message="handleMessage" :src="url + '#' + hash"></web-view> </view> </template> <script> export default { data() { return { url: 'https://example.com', hash: '' }; }, methods: { handleMessage(e) { const msg = e.detail.data[0]; console.log('收到消息:', msg); this.hash = encodeURI(msg); // 更新 Hash 值 }, sendMessage(msg) { this.hash = encodeURI(msg); // 发送消息到 H5 页面 } } }; </script> ``` 在此方法中，H5 页面可以通过 `window.uni.postMessage()` 向 UniApp 发送消息，而 UniApp 则通过 `@message` 事件接收消息[^4]。 --- #### 注意事项 1. **延迟问题**：在某些情况下，`currentWebview.children()[0]` 可能无法立即获取到子 Webview 对象，因此需要通过 `setTimeout` 延迟执行相关代码。 2. **跨域限制**：如果加载的是外部链接，可能需要处理跨域问题。 3. **兼容性**：确保测试设备支持 HTML5+ API 和 `webview` 组件的相关功能。 --- ###