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>

Uniapp中调整web-view的高度、获取当前的web-view页面URL相关推荐

uniapp中图片宽度100%，高度自适应
uniapp中图片宽度100%,高度自适应 <view class="headeruser-image"><image mode='widthFix' src=& ...
js 字符和html和数值拼接,js中substring和substr的用法(获取字符串为整个html页面中的某个数值)...
substring 方法用于提取字符串中介于两个指定下标之间的字符html substring(start,end)正则表达式开始和结束的位置,从零开始的索引spa 参数描述 start ...
vue中拿到接口，并获取数据，渲染到页面
首先index.html完成的是单页面展示,app.vue里面已经写了视图出口, 例如;先新建一个role.vue页面,写上相应的布局和内容,然后在路由中添加这个页面. 然后开始写渲染数据的方法前提 ...
android view 曝光,Android 曝光采集（商品view曝光量的统计）第二弹
安卓端有效曝光统计步骤 1 ,要确定什么样的算有效曝光(在屏幕停留时间超过一个值如2秒) 2,监听到每个view移入和移出屏幕的事件 3,把数据绑定到view(view相当于数据的载体) 4,根据监听 ...
uniapp中自定义导航栏动态获取高度
<template><view class="coutainer"><view class=" ...
uniapp 中通过经纬度获取地址详情(vue)
需要第三方地图的支持本文以百度地图为例第一步安装百度地图插件 npm install vue-baidu-map --save 成功后在main.js 中引入百度地图 import Bai ...
table列最小宽度 vue_vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)...
mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrolltable.addeventlistener( 'scroll',(event) => ...
微信小程序如何让获取view的高度
昨天在群里有过美女前端问了一个问题,小程序如何获取view的高度,说百度了好久,看了半文档没有解决,正好我前几天遇到过这过问题,就在这分享一下如何解决. <大盒子标签> <内容标签& ...
html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...

Uniapp中调整web-view的高度、获取当前的web-view页面URL

web-view

web-view标签的使用

设置web-view的高度

获取当前web-view的URL

Uniapp中调整web-view的高度、获取当前的web-view页面URL相关推荐

最新文章

热门文章