项目需求:通过uni-app
的webview
嵌入H5页面,且webview
的src
为互联网页面访问地址,页面中涉及很多可点击链接,若不加限制,则可以在webview
中随意跳转至其它外链地址,存在安全合规隐患。
可通过overrideUrlLoading
实现拦截Webview
窗口的URL请求。
语法如下:
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
},
以上根据自身业务需求进行,可以完成H5页内webview
请求拦截。
联系客服