uniapp webview overrideUrlLoading
时间: 2025-06-14 20:23:04 浏览: 4
### UniApp WebView `overrideUrlLoading` 使用方法与示例
在 UniApp 中,`plus.webview` 提供了对 WebView 的强大支持,其中包括 `overrideUrlLoading` 方法。该方法可以用来拦截页面跳转行为,并根据匹配规则执行自定义逻辑[^1]。
以下是使用 `overrideUrlLoading` 的完整示例:
```javascript
// 创建一个 WebView 实例
var w = plus.webview.create('https://www.baidu.com?appId=000999&redirectUri=https://www.baidu.com/ias/app/login/token&responseType=code', 'webviewId', {
top: '0px',
bottom: '0px'
});
// 调用 overrideUrlLoading 方法拦截 URL 跳转
w.overrideUrlLoading({
mode: 'reject', // 拒绝模式,阻止所有匹配的跳转
match: 'http://localhost/.*' // 匹配规则,拦截以 http://localhost 开头的 URL
}, function (e) {
// 当匹配到指定 URL 时触发回调函数
console.log('Intercepted URL: ' + e.url);
// 解析 URL 参数
var ceTokenId = e.url.split('?')[1].split('&')[2].split('=')[1]; // 获取 tokenId
console.log('Parsed tokenId: ' + ceTokenId);
// 执行其他逻辑,例如关闭当前 WebView
plus.webview.close(w);
});
// 显示 WebView
w.show();
```
#### 代码说明
1. **创建 WebView**:通过 `plus.webview.create` 方法创建一个新的 WebView 实例,并指定加载的初始 URL 和样式参数。
2. **设置拦截规则**:调用 `overrideUrlLoading` 方法,传入配置对象和回调函数。配置对象中的 `mode` 设置为 `'reject'` 表示拒绝匹配的跳转,`match` 是正则表达式或字符串形式的匹配规则。
3. **处理拦截事件**:当匹配到指定 URL 时,回调函数会被触发,可以在其中解析 URL 参数或执行其他操作。
4. **显示 WebView**:调用 `w.show()` 方法将 WebView 显示出来。
---
### 注意事项
- `overrideUrlLoading` 方法仅在 App 端(如 Android 和 iOS)有效,H5 和小程序端不支持此功能[^1]。
- 配置对象中的 `mode` 支持两种值:
- `'allow'`:允许跳转。
- `'reject'`:拒绝跳转。
- `match` 参数可以是正则表达式字符串或简单的匹配规则,用于定义需要拦截的 URL 模式。
---
### 相关扩展
如果需要动态调整 WebView 的内容或其他交互逻辑,可以结合 `plus.webview.open` 方法实现[^2]。例如:
```javascript
this.webview = plus.webview.open('https://blog.coder666.cn/webviewtest/index.html', '', {
top: '246px',
bottom: '100px'
});
```
上述代码展示了如何通过 `plus.webview.open` 方法打开一个新页面,并设置其位置参数。
---
### 文件上传功能的集成
如果需要在 WebView 中集成文件上传功能,可以参考以下封装组件示例[^3]:
```vue
<template>
<view>
<l-file ref="lFile" @up-success="onSuccess"></l-file>
<view class="padding text-center">
<button @tap="onUpload">上传</button>
</view>
</view>
</template>
<script>
import lFile from '@/components/l-file/l-file.vue';
export default {
components: { lFile },
methods: {
onUpload() {
this.$refs.lFile.upload({
currentWebview: this.$mp.page.$getAppWebview(),
url: 'https://www.example.com/upload',
name: 'uploadFile'
});
},
onSuccess(res) {
console.log('上传成功回调=====', JSON.stringify(res));
uni.showToast({ title: JSON.stringify(res), icon: 'none' });
}
}
};
</script>
```
---
阅读全文
相关推荐

















