前端iframe引入一个超大页面，实现自动缩放

最新推荐文章于 2024-08-28 09:48:48 发布

超超超超子

最新推荐文章于 2024-08-28 09:48:48 发布

阅读量5.9k

点赞数 1

分类专栏： HTTP 文章标签： iframe 自动缩放自适应引用页面

本文链接：https://blog.csdn.net/g5703129/article/details/90381554

版权

HTTP 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

遇到的一个问题，用了很久研究出来了。

前端iframe引入一个超大页面，实现自动缩放

废话不多说，上代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>11</title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				transform-origin: 0px 0px 0px;
				background: red;
				/*height: 1600px;*/
			}
			#App1 {
				position: absolute;
				transform: scale(0.4);
				transform-origin: 0 0;
			}
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
	</head>

	<body>
		<!-- <div class="App"> -->
		<iframe id="App1" src="http://125.35.91.158:8018/FJ-LargeScreen-2k/" frameborder="0" width="3840px" height="2160px"></iframe>
		<!-- </div> -->
	</body>
	<script type="text/javascript">
		// 一开始加载就适应屏幕的宽高
		$(function() {
			//offsetWidth： 获取body元素对象的宽度，即offsetWidth=width+padding+border availWidth：返回当前屏幕宽度
			var scale = document.body.clientWidth / window.screen.availWidth;
			$(document.body).css("-webkit-transform", "scale(" + scale + ")");
		});
		$(window).resize(function() {
			var scale = document.body.clientWidth / window.screen.availWidth;
			$(document.body).css("-webkit-transform", "scale(" + scale + ")");
		});
	</script>

</html>