跨平台应用开发进阶 (五十七)：uni-app 通过 overrideUrlLoading 实现拦截 webview 窗口的 URL 跳转请求

2023-04-26
上海
本文字数：1711 字
阅读完需：约 6 分钟

一、前言

项目需求：通过uni-app的webview嵌入 H5 页面，且webview的src为互联网页面访问地址，页面中涉及很多可点击链接，若不加限制，则可以在webview中随意跳转至其它外链地址，存在安全合规隐患。

可通过overrideUrlLoading实现拦截Webview窗口的 URL 请求。

二、overrideUrlLoading

语法如下：

void wobj.overrideUrlLoading(options, callback);

复制代码

说明：

拦截URL请求后，Webview窗口将不会跳转到新的URL地址，此时将通过callback回调方法返回拦截的URL地址（可新开Webview窗口加载URL页面等）。
此方法只能拦截窗口的网络超链接跳转（包括调用loadURL方法触发的跳转），不可拦截页面请求资源请求（如加载css/js/png等资源的请求）。
多次调用overrideUrlLoading时仅以最后一次调用设置的参数值生效。

参数：

options: ( WebviewOverrideUrlOptions ) 可选拦截 URL 请求的参数。
effect:(String 类型 ) 拦截URL请求生效时机。可取值：
“instant” -表示立即生效，即调用overrideUrlLoading方法后立即生效；
“touchstart” -表示用户操作Webview窗口（触发touchstart事件）后生效，如果用户没有操作Webview窗口则不对 URL 请求操作进行拦截处理。

默认值为"instant"。

mode: (String 类型 ) 拦截模式。可取值： “allow”、"reject”，默认值为"reject”。
“allow”表示满足match属性定义的条件时不拦截 url 继续加载，不满足match属性定义的条件时拦截url跳转并触发callback回调；
“reject"表示满足match属性定义的提交时拦截url跳转并触发callback回调，不满足match属性定义的条件时不拦截url继续加载。
match: (String 类型 ) 区配是否需要处理的URL请求。支持正则表达式，默认值为对所有URL地址生效（相当于正则表达式“.*”）。如果mode值为"allow"则允许区配的URL请求跳转，mode值为"reject"则拦截区配的URL请求。
exclude: (String 类型 ) 排除拦截处理请求类型。不拦截处理指定类型的URL请求，直接使用系统默认处理逻辑。可取值：
"none"表示不排除任何URL请求（即拦截处理所有URL请求）；
“redirect"表示排除拦截处理301/302跳转的请求（谨慎使用，非a标签的href触发的URL请求可能会误判断为302跳转）。默认值为"none”。
callback: ( OverrideUrlLoadingCallback ) 可选拦截URL请求的回调函数。

参数：event: ( Event ) 必选 Webview窗口拦截URL跳转事件数据；可通过event的url属性获取拦截的URL地址。

返回值：void : 无

平台支持：

Android - ALL (支持) :
5+APP需要选择“解压资源后运行”模式后才能截获应用资源的 URL 请求。
iOS - ALL (支持)

二、码上解决

onReady() {  var that = this;  // #ifdef APP-PLUS  var pages = getCurrentPages();  var page = pages[pages.length - 1];  var currentWebview = page.$getAppWebview();  // 或者通过以下方式获得：const currentWebview = this.$mp.page.$getAppWebview();   var url = currentWebview.children()[0].getURL();  // 延时是为了正确获取到 child 也就是打开外链地址的web-view对象，overrideUrlLoading阻止外层对象没有用  setTimeout(()=>{    var wv = currentWebview.children()[0];    // 拦截所有页面的跳转，可使用参数拦截  .jd.com    wv.overrideUrlLoading({        // “reject"  表示满足match属性定义的提交时拦截url跳转并触发callback回调，不满足match属性定义的条件时不拦截url继续加载。        // “allow”  表示满足match属性定义的条件时不拦截url继续加载，不满足match属性定义的条件时拦截url跳转并触发callback回调；      mode: 'allow',      match: '.*jd\.com/.*'    }, function(e) {      try {        // 根据自己的业务需求，处理链接上的参数，进行跳转        var navURL =`/pages/index/order/order?id=${xxx}`;        uni.navigateTo({          url: navURL,          animationType: 'pop-in'        })      } catch (e) {        console.log(e)        //TODO handle the exception      }      console.log('reject Url', url);    })  }, 500);  // #endif},