uniapp修改webview内容

在uniapp中,如需引用外部网页可使用<webview >标签,但有时会根据项目需求去掉或者替换一些不需要的内容或者调整网页大小位置等,这时直接使用js创建一个webview标签来加载html即可。但只能在App端实现，具体方式如下
1、创建标签

let wv;
wv = plus.webview.create("", "custom-webview", {
    
    
	plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
	'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
	top: uni.getSystemInfoSync().statusBarHeight + 40 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
})
wv.loadURL(url)//本地:_www/static/webview/dazhong.html

2、按需求替换文件

wv.overrideResourceRequest([
	{
    
    
		match: 'http[s]?:.*?.png',
		redirect: '_www/static/image/qdy.png'
	 },
	{
    
    
		match: '被替换的css文件地址',
		redirect: '_www/static/webview/dazhonglayout.css'
	},
])

注意:

如需要修改的地方太多或者非外部引入的js/css文件，可以用浏览器打开调试模式，找到源代码，将整个html文件拷贝到本地，在根据自己的需要进行修改，然后将上述代码中wv.loadURL(url)中的url改为'_www'+根路径。

改动小,且改动的内容属于外部引入文件，可以将源文件复制一份到本地，修改后再替换为本地文件

直接将需要改动的样式添加在以.css结尾的文件中，改动.css?4d4ef6ea6260ef7a0ed 这种后缀文件无效。

3、将标签append到当前页面

//此对象相当于html5plus里的plus.webview.currentWebview()。
//在uni-app里vue页面直接使用plus.webview.currentWebview()无效
var currentWebview = this.$scope.$getAppWebview() || this.$parent.$scope.$getAppWebview(); 
currentWebview.append(wv); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭

4、设置webview的显示和隐藏

// #ifdef APP-PLUS
	plus.webview.hide('custom-webview');//隐藏
	plus.webview.show('custom-webview');//显示
// #endif

5、完整代码

<template>
	<view class="">
		<button @click='setWebView("show")'>显示</button>
		<button @click='setWebView("hide")'>隐藏</button>
	</view>
</template>
export default {
    
    
	onShow(){
    
    
		// #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 + 40 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
		})
		wv.loadURL(url)
		//下列是替换match所匹配的文件  
		wv.overrideResourceRequest([
			{
    
    
				match: '被替换的css文件地址',
				redirect: '_www/static/webview/dazhonglayout.css'
			},
		])
		var currentWebview = this.$scope.$getAppWebview() || this.$parent.$scope.$getAppWebview();
		currentWebview.append(wv);
		// #endif
	},
	methods:{
    
    
		setWebView(e){
    
    
		// #ifdef APP-PLUS
		plus.webview[e]('custom-webview');
		// #endif
		}
	}
}

webview使用方法官方文档

uniapp修改webview内容

uniapp修改webview内容

猜你喜欢