前言

最近在项目中遇到一个需求，就是通过uni-app的webview嵌入H5页面，并且点击对应的按钮，跳回uni-app中的下单页面，但是在H5页面本身就能进行其他页面的跳转，所以需要阻止H5页面内的跳转（也就是H5自身的跳链操作）

---

uni-app#webview文档地址:https://uniapp.dcloud.net.cn/component/web-view.html#web-view

具体实现 （IOS、Android均有效）

• 获取当前webview页面

		//方法一
		const currentWebview = this.$mp.page.$getAppWebview(); 
		//方法二
		var pages = getCurrentPages();  
		var page = pages[pages.length - 1]; 
		var currentWebview = page.$getAppWebview(); 
1
2
3
4
5
6

• 拦截H5页内的跳转请求

	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);
	})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 完整代码

	onReady() {
			var that = this;
			console.log('==========onReady  Start========')
			// #ifdef APP-PLUS
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			var currentWebview = page.$getAppWebview();
			var url = currentWebview.children()[0].getURL();
			console.log("===URL===", url);

			var wv = currentWebview.children()[0];
			// 拦截所有页面的跳转，可使用参数拦截  .jd.com
			wv.overrideUrlLoading({
				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);
			})
			// #endif
			console.log('==========onReady  End========')
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

---

以上根据自身业务需求进行，可以完成H5页内webview请求拦截。