H5 嵌套iframe并设置全屏

你的眼睛會笑

已于 2024-01-30 18:30:10 修改

阅读量733

点赞数 2

分类专栏： uniapp 文章标签： javascript 前端 css

于 2024-01-30 10:19:08 首次发布

本文链接：https://blog.csdn.net/weixin_45563734/article/details/135926834

版权

uniapp 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了如何在H5页面中使用嵌套IFrame，并设置了全屏模式，同时展示了如何获取设备信息，适用于uni-app开发环境中的页面布局和交互设计。

摘要由CSDN通过智能技术生成

H5 嵌套iframe并设置全屏

上图上代码

<template>
	<view class="mp-large-screen-box">
		<view class="mp-large-screen-count">
			<view class="mp-mini-btn-color mp-box-count" hover-class="mp-mini-btn-hover" @click="clickLeft">
				<uni-icons type="left" size="18" color="#ffffff"></uni-icons>
			</view>
			<iframe class="mp-iframe" :src="ptzUrl" frameborder="0" :style="`width: ${dataInfos.windowHeight}px;
				height: ${dataInfos.windowWidth}px;
				position: absolute;
				top: -${dataInfos.windowWidth}px;
				left: 0;transform: rotate(90deg);transform-origin:0 ${dataInfos.windowWidth}px;pointer-events: none;`"></iframe>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				dataInfos: {}, // 获取设备信息
			}
		},
		props: {
			showPtz: {
				type: String,
				default: () => '',
			},
			// 视频流
			ptzUrl: {
				type: String,
				default: () => '',
			},
		},
		mounted() {
			let that = this
			// 获取状态栏高度
			uni.getSystemInfo({
				success: function(e) {
					console.log(e, '传参设备')
					that.dataInfos = e
				},
			})
		},
		methods: {
			// 返回上一页
			clickLeft() {
				this.$emit('callbackFun')
			},
		},
	}
</script>
<style scoped lang="scss">
	.mp-large-screen-box {
		width: 100%;
		height: 100%;

		.uni-navbar__content {
			border-bottom: 0;
		}
	}

	.mp-large-screen-count {
		width: 100%;
		height: 100%;
	}

	.mp-iframme {
		width: 100%;
		height: 100%;
	}

	.mp-btn {
		position: absolute;
		top: 90%;
		right: 10px;
		width: 32px;
		height: 32px;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		padding: 0 !important;
	}

	.mp-mini-btn-color {
		margin-top: 14px;
		position: fixed;
		display: block;
		padding-left: 14px;
		padding-right: 14px;
		box-sizing: border-box;
		font-size: 18px;
		text-align: center;
		text-decoration: none;
		border-radius: 5px;
		overflow: hidden;
		cursor: pointer;
		line-height: 36px;
		font-size: 14px;
		background-color: var(--mp-primary);
		border-color: var(--mp-primary);
		color: #fff;
		bottom: 30px;
		width: 36px;
		height: 36px;
		right: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mp-mini-btn-hover {
		animation: var(--mp-primary-light-10);
	}

	.mp-box-count {
		transform: rotate(90deg);
		position: absolute;
		right: 30px;
		z-index: 100 !important;
		top: 10px;
	}
</style>