父页根据iframe子页内容调整iframe页面大小

最新推荐文章于 2022-11-03 10:12:30 发布

夏木炎

最新推荐文章于 2022-11-03 10:12:30 发布

阅读量2.2k

点赞数

分类专栏： JS 前端文章标签： iframe自定义高度

本文链接：https://blog.csdn.net/xm393392625/article/details/84578314

版权

JS 同时被 2 个专栏收录

38 篇文章 1 订阅

订阅专栏

前端

35 篇文章 0 订阅

订阅专栏

一.带有iframe的父页

1）html

<!DOCTYPE html>
<html>
<head>
 <title>带有iframe的父页</title>
</head>
<body>
    <iframe src="" id="businessPage" width="99%" height="150px;" style="margin:5px;" onclick="alert('aaa');"></iframe>
</body>
</html>

2）js

$(document).ready(function(){
    $("#businessPage").load(function(){//用于每次刷新时控制iframe高度初始化
 	    //$(this).height(0); 
 	    var iframeHeight;
 	    if($(this)[0].contentWindow.getApproveBusinessPageHeight){
 	        iframeHeight = $(this)[0].contentWindow.getApproveBusinessPageHeight();
 	    }else{
 	     	iframeHeight = $(this).contents().height() + 40;
 	    }
 	    $(this).height( iframeHeight < 150 ? 150 : iframeHeight );
    });
 	$("#businessPage").attr("src", "${business.pageUrl }");
});

二.iframe加载的子页

1）js

/*自定义iframe 高度的方法*/
function getApproveBusinessPageHeight(){
    return $("#comMenuFrame").height() + 40;
}

夏木炎

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
父页根据iframe子页内容调整iframe页面大小

一.带有iframe的父页1）html&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;带有iframe的父页&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;iframe src="" id="businessPage&quo
复制链接

扫一扫