web-view

Webview 是一个基于webkit引擎，可以解析DOM 元素，展示html页面的控件，它和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。（chrome浏览器也是基于webkit引擎开发的，Mozilla浏览器是基于Gecko引擎开发的）

开发过小程序的话对这个标签应该比较熟悉，web-view标签与iframe标签类似，可以在我们的页面中渲染第三方页面

web-view标签的使用

与iframe标签类似

<iframe src="URL路径"></iframe>

web-view:

<web-view src="URL路径"></web-view>

web-view与iframe的区别

web-view标签默认是占满屏幕的且不能使用CSS改变样式（例如在CSS设置height或者width），甚至web-view的层级是最高的，也就是说不能有元素可以显示在web-view上

iframe标签则可以通过CSS设置宽或者高，我们可以将其他元素显示在iframe标签上，例如（悬浮框组件）

---

设置web-view的高度

<template>
	<view class="content">
		<web-view src="https://www.baidu.com"></web-view>
		<view class="header">
			<text style="font-size: 40rpx;">标题</text>
			<u-icon name="share" size="40"></u-icon>
		</view>
	</view>
</template>

<script>
	var wv;
	export default {
		data() {
			return {
				
			}
		},
		onReady() {
		   var self = this;
		   var currentWebview = this.$scope.$getAppWebview();
		   setTimeout(function() {
			let h=720,top=70;
		    wv = currentWebview.children()[0]
			uni.getSystemInfo({//获取设备信息
			    success: function (res) {
					h=res.windowHeight-top;
			    }
			});
		    wv.setStyle({//设置web-view高度与web-view跟设备顶部的距离
		     top:top,
			 height:h,
		    })
		   }, 1000); //如果是页面初始化调用时，需要延时一下
		}
	}
</script>

<style lang="less" scoped>
.header{
		padding: 20rpx;
		box-sizing: border-box;
		width: 100vw;
		height: 140rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
}
</style>

获取当前web-view的URL

<template>
	<view class="content">
		<web-view src="https://www.baidu.com"></web-view>
		<view class="header">
			<text style="font-size: 40rpx;">标题</text>
			<u-icon name="share" size="40" @click="show"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onReady() {
		  
		},
		methods:{
			show(){
				var pages = getCurrentPages();  
				var page = pages[pages.length - 1];  
				var currentWebview = page.$getAppWebview();  
				console.log(currentWebview.children()[0].getURL());//获取当前web-view的URL
			}
		}
	}
</script>

<style lang="less" scoped>
.header{
		padding: 20rpx;
		box-sizing: border-box;
		width: 100vw;
		height: 140rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
}
</style>