web-view 嵌套的第三方，拦截请求--UNI_APP（三）

最新推荐文章于 2024-03-15 16:05:02 发布

wax9092

最新推荐文章于 2024-03-15 16:05:02 发布

阅读量2k

点赞数

分类专栏： uni-app 文章标签：前端 webview javascript

本文链接：https://blog.csdn.net/wax9092/article/details/122969800

版权

uni-app 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一.需求背景：

web-view 嵌套淘宝商品列表页，点击淘宝商品列表页某个商品，拦截获取这个链接信息，阻止跳转

二.实现方法

1.uni-app 项目

之间在一个.vue页面，在onload钩子里写这段代码即可

// #ifdef APP-PLUS
   wv = plus.webview.create("","custom-webview",{
   plusrequire:"none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
   'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
       top:uni.getSystemInfoSync().statusBarHeight+44 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
        })
        wv.loadURL("https://m.jd.com")
        var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
        currentWebview.append(wv);//一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
        setTimeout(function() {
            console.log(wv.getStyle())
        }, 1000);//如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取
        console.log('8888')
        wv.overrideUrlLoading({mode:'reject'}, function(e){
                console.log('拦截请求==: '+e.url);
         });

2. 5+App

直接将代码，放在.html文件中即可

<!DOCTYPE html>
<html>
	<head>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
var nWaiting,nTitle; // 原生view的等待界面和title
var touchX; // nWaiting的点击坐标的x数值
var backPressed; //返回箭头是否处于按下状态
var contentWebview=null; //准备打开网址的webview
var bitmap=null; // 返回图标
var topoffset=0;
// H5 plus事件处理
function plusReady(){
	if(plus.navigator.isImmersedStatusbar()){// 兼容沉浸式状态栏模式
		topoffset=Math.round(plus.navigator.getStatusbarHeight());
	}
	var bdata = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8xMi8xM5w+I3MAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAACcklEQVR4nO3a0XESURiG4TeO99iBWoGZ+RvADtKBpAPtwBLsANJBrEAs4MyYDmIHSQXkgk0mMLK7ILt8/+F778ici394OGfDsher1Qqn05tTD+A2M4hYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYb089wNCVUq6Ay+blfUQsTjhOZxc1P9tbSlkAX7b+/C0ifpxgnF5Ve2TtwAD4OvIoe1UlSAsGwPsRR9m76kA6MAD+jjTKQVUF0gMD4HaEUQ6umot6T4ybiJgNP83hVbFDasGACnZIT4yfEXE1wjj/Xeod0hPjDpgNPsyRSguyB8Y0Ih6Gn+g4pQSpFQMSgtSMAclAaseARCDngAFJQM4FAxKAnBMGiH8xLKVMgV89ln6MiPthpxkn6R0SEUvgusfSZSnlsnuZftI75LlSygyYdyx7ZH1s/Rl+ouFKAQIvx9ctMGlZlh4lDQhAcywtqRhF+hqyXfMmT1m/6buasL6mzMaY6dilAoENlLuWZRNgnhEl1ZH1ulLKO9bH16eOpdfqz2K9Lt0Oea75EjilfadAsp2SFgQ2UH53LJ2XUr4PPtARSntkbVfL7+rVgEBvlM/NHQDJUh9Z2zWf/puOZbPhJzm8qkDgBaXt/teHcSY5rOpAAJp/c/vclJSrShDYifKI+NPvVV3U/1VzU3LavFyo/25SPUi2qj2ysmYQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsZ4Ak9fPFwUy/HsAAAAASUVORK5CYII=';
	bitmap = new plus.nativeObj.Bitmap('back');
	bitmap.loadBase64Data(bdata, function(){
		bitmap.isLoadSuccess = true;
		nWaiting&&nWaiting.drawBitmap(bitmap,null,{top:topoffset+'px',left:'0px',width:'44px',height:'44px'},'backicon');
		console.log('Back bitmap load success');
	}, function(e){
		console.log('Back bitmap load failed: '+JSON.stringify(e));
	});
	
	//创建nWaiting
	creatWaiting();
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready',plusReady,false);
}
// 创建原生View控件
function creatWaiting(){
	console.log('creatWaiting: '+topoffset);
	//判断view是否已存在，避免重复创建，尤其调试刷新网页时很容易触发重复创建 
	nWaiting = plus.nativeObj.View.getViewById('nWaiting');
	if(nWaiting){
		return;
	}
	nWaiting = new plus.nativeObj.View('nWaiting',{top:'0px',left:'0px',height:'100%',width:'100%'});
	nWaiting.interceptTouchEvent(true);
	
	//初始化绘制nwaiting界面
	nWaiting.drawRect('#D74B28',{top:'0px',left:'0px',height:(topoffset+44)+'px',width:'100%'}) //绘制title背景色
	bitmap&&bitmap.isLoadSuccess&&nWaiting.drawBitmap(bitmap,null,{top:topoffset+'px',left:'0px',width:'44px',height:'44px'},'backicon');
	nWaiting.drawText( '标题', {top:topoffset+'px',left:'0px',width:'100%',height:'44px'}, {size:'17px',color:'#CCCCCC'});
	nWaiting.drawRect('#EEEEEE',{top:(topoffset+44)+'px',left:'0px',width:'100%'}) //绘制等待内容区背景色
	nWaiting.drawText( '加 载 中 ...', {top:(topoffset+44)+'px',left:'0px',width:'100%',height:'50%'}, {size:'12px',color:'rgb(100,100,100)'});
}
// 使用原生View控件作为动画模板显示窗口 
function showWithWaiting(){
	var bShow=bUpdate=false;
	contentWebview = plus.webview.create('https://m.jd.com', 'contendWebview', {
		titleNView:{
			autoBackButton: true,
			backgroundColor: '#D74B28',
			titletText: '标题',
			titleColor: '#CCCCCC',
		}
	});
	contentWebview.addEventListener('close', function(){
		console.log('close',888)
		contentWebview=null;
	});
	contentWebview.addEventListener('titleUpdate', function(e){
		console.log(e.title,"e==")
		console.log('titleUpdate',99)
		bUpdate=true;
		bShow&&nWaiting.hide();
	}, false);
	contentWebview.addEventListener('loaded', function(){// 兼容titleUpdate事件不触发的情况
		console.log("监听==")
		bUpdate||(bUpdate=true,bShow&&nWaiting.hide());
	}, false);
	contentWebview.show('pop-in', null, function(){
		cconsole.log('pop-in');
		bShow=true;
		bUpdate&&nWaiting.hide();
	}, {capture:nWaiting});
	
	// 监听加载页面资源
	contentWebview.overrideUrlLoading({mode:'reject'}, function(e){
	        console.log('拦截请求==: '+e.url);
	    });
}
// 重写返回处理
var _back=window.back;
function safeback(){
	console.log('safeback')
	contentWebview?contentWebview.close('pop-out'):(bitmap&&bitmap.clear(),nWaiting&&nWaiting.clear(),_back());
}
window.back=safeback;
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
	</head>
	<body>
		<p class="des">
使用nview来做转场动画，以及使用原生view做标题栏。
		</p>
		<div class="button" onclick="showWithWaiting()">演示</div>
		<p class="des" style="font-weight:bold;text-indent:0;">
逻辑简述：
		</p>
		<p class="des">
启动后先创建一个原生waiting界面，但不显示。
点击show按钮后，原生waiting做动画进来，同时然后创建一个带原生View控件导航栏的contentWebview加载网络页面，等titleUpdate后显示contentWebview并关闭原生waiting界面。
		</p>
	</body>
</html>

参考链接：HTML5+ API Referencehttps://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.overrideUrlLoading