html中iframe自适应高度监听浏览器窗口变化=改变iframe高度

最新推荐文章于 2024-08-20 23:46:15 发布

艾小逗

最新推荐文章于 2024-08-20 23:46:15 发布

阅读量1.5k

点赞数 1

分类专栏： # javaScript 文章标签： iframe height window

本文为艾小逗原创文章，未经允许不可转载。转载请注明出处

本文链接：https://blog.csdn.net/qq_32442967/article/details/89498374

版权

javaScript 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

js设置iframe自适应高度
监听浏览器窗口变化=改变iframe高度

个人理解：

/**
 * 设置iframe高度、body高度和浏览器窗口高度一样，
 * body层没有滚动条，
 * 只有iframe内有滚动条
 */

主要js代码

//$(window).height()代表了当前可见区域的大小，
//#iframeId 为iframe的id属性
//减去30   调整iframe大小
function setHeight() {
			$('body').height($(window).height());
			var $content = $("#iframeId");
			$content.height($(this).height() - 30); 
			$content.find('iframe').each(function() {
				$(this).height($content.height());
			})
		}

粘贴完整代码看效果

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>iframe自适应高度</title>
		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
		<style>
			html, body {
				margin: 0;
				padding: 0;
				width: 100%;
			}
			.iframe_div, .frameId {
				width: 100%;
				border: 0;
			}
		</style>
	</head>

	<body>
		<div class="right-div">
			<a href="aaaa.html" target="iframeId"> aaaa</a>
			<a href="bbbb.html" target="iframeId">bbbb</a>
		</div>
		<div class="iframe_div">
			<iframe class="frameId" src="aaaa.html" name="iframeId" id="iframeId"></iframe>
		</div>

	</body>

</html>
<script>
	$(function() {

		//改变iframe高度
		setHeight();

		/*监听浏览器窗口变化=改变iframe高度*/
		window.addEventListener("resize", function() {
			setHeight();
		});

		//设置iframe高度
		function setHeight() {
			$('body').height($(window).height());
			var $content = $("#iframeId");
			$content.height($(this).height() - 30); //减去30   调整iframe大小
			$content.find('iframe').each(function() {
				$(this).height($content.height());
			})
		}

	})
</script>