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

灰太狼 2022-02-15 14:58 489阅读 0赞

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>