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>