实现iframe 高度自适应
程序员文章站
2022-05-01 12:26:03
...
实现iframe 高度自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现iframe高度自适应</title>
</head>
<body>
<h2>实现iframe的高度自适应</h2>
<iframe src="iframe1.html" width="600px" height="300px" frameborder="3" scrolling="no" id="iframe-content"></iframe>
</body>
<script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#iframe-content").load(function(){ //带有url的指定的元素以及子元素，被加载后，如图像，框架
console.log($(this).contents());
var vHeight = $(this).contents().find("body").height()+32; //contents()可以后去iframe里面的元素
$(this).height(vHeight<300?300:vHeight);
})
})
</script>
</html>上一篇： 背景图片高度自适应
下一篇： 点击屏幕，获取屏幕上的坐标