Advanced cross-platform application development (fifty-seven): uni-app intercepts the URL jump request of the webview window through overrideUrlLoading

I. Introduction

Project Requirements : Embed H5 page through , and uni-appis the access address of the Internet page. There are many clickable links in the page. If there is no restriction, you can jump to other external link addresses at will, which has potential safety and compliance risks.webviewwebviewsrcwebview

overrideUrlLoadingThe URL request of the interception window can be implemented Webview.

二、overrideUrlLoading

The syntax is as follows:

void wobj.overrideUrlLoading(options, callback);

illustrate:

• After intercepting URLthe request, Webviewthe window will not jump to the new URLaddress, and the callbackintercepted URLaddress will be returned through the callback method (you can open a new Webviewwindow to load URLthe page, etc.).
• This method can only intercept the network hyperlink jump of the window (including loadURLthe jump triggered by calling the method), and cannot intercept the page request resource request (such as css/js/pngthe request for loading and other resources).
• When called multiple times overrideUrlLoading, only the parameter value set in the last call takes effect.

Parameters :

• options: ( WebviewOverrideUrlOptions) Optional intercept URL request parameters.

• effect:(String type) URLThe effective timing of the interception request.
  Possible values:

• " instant" - Indicates that it takes effect immediately, that is, overrideUrlLoadingit takes effect immediately after calling the method;

• " touchstart" - Indicates that it will take effect after the user operates Webviewthe window (triggers touchstartthe event). If the user does not operate Webviewthe window, the URL request operation will not be intercepted.

The default value is "instant".

• mode: (String type) interception mode. Possible values: " allow", " reject", the default value is " reject".

  • " allow" indicates that matchthe url will not be intercepted to continue loading when the conditions defined by the attribute are met, and the jump will be intercepted and a callback will be triggered matchwhen the conditions defined by the attribute are not met ;urlcallback
  • " reject"Indicates that the jump is intercepted and the callback is triggered matchwhen the attribute definition is satisfied , and the loading is not intercepted when the attribute definition is not met.urlcallbackmatchurl

• match: (String type) Whether the request needs to be processed or not URL. Regular expressions are supported, and the default value is URLvalid for all addresses (equivalent to the regular expression ".*"). If modethe value is " allow", the redirection of the regional allocation URLrequest is allowed; modeif the value is " reject", the regional allocation URLrequest is intercepted.

• exclude: (String type) Exclude interception processing request types. Do not intercept and process specified types of URLrequests, and directly use the system's default processing logic. Possible values:

  • " none"means not to exclude any URLrequest (that is, to intercept and process all URLrequests);
  • " redirect"Indicates to exclude interception processing 301/302jump requests (use with caution, non- alabel hreftriggered URLrequests may be misjudged as 302jumps). The default value is " none".

• callback: ( OverrideUrlLoadingCallback ) Optional URLcallback function for intercepting requests.

Parameters:
event: ( Event ) Mandatory WebviewThe window intercepts URLjump event data; the intercepted address
can be obtained through eventthe property .urlURL

Return value :
void: None

Platform support :

• Android- ALL (support) :
• 5+APPYou need to select the "Run after decompressing resources" mode to intercept URL requests for application resources.
• iOS- ALL (support)

2. Code solution

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
},

The above is based on your own business needs, and you can complete webviewthe request interception in the H5 page.

3. Extended reading

• webview document address