iframe框架高度自适应

最新推荐文章于 2022-05-25 14:09:35 发布

Java红桃峰峰日拱一卒

最新推荐文章于 2022-05-25 14:09:35 发布

阅读量447

点赞数

分类专栏： HTML 文章标签： iframe高度自适应

本文链接：https://blog.csdn.net/u011159417/article/details/77865557

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在写jsp页面时，在主页面中用到了iframe标签嵌套子页面的情况，这种情况，子页面中的内容有的多有的少，所以iframe的高度也要自动适应，在网上找到了这个方式，记录一下；

代码如下：

<html>
    <head>
        <script type="text/javascript">
        //iframe自适应高度的函数
        var oTime = null;
        function resize() {
            if (oTime) {
                clearTimeout(oTime);
            }
            oTime = setTimeout(reset, 200);
        }
 
        //iframe自适应高度的函数
        function reset() {
            var frame = document.getElementById("iframeId");
            var outHeight = frame.offsetHeight;
            var inHeight = frame.contentWindow.document.body.scrollHeight;
            if (outHeight < inHeight) {
                frame.style.height = (inHeight + 10) + "px";
            }else if(inHeight>650){
                frame.style.height=(inHeight + 10) + "px";
            }else{
                frame.style.height="750px";
            }
        }
        </script>
    </head>
    <body>
        <div>
            <iframe src="test.html" id="iframeId" frameborder="0"
                scrolling="no" onreadystatechange="resize()" οnlοad="resize()"></iframe>
        </div>
    </body>
</html>

代码参考地址：http://bbs.csdn.net/topics/340017880

Java红桃峰峰日拱一卒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe框架高度自适应

在写jsp页面时，在主页面中用到了iframe标签嵌套子页面的情况，这种情况，子页面中的内容有的多有的少，所以iframe的高度也要自动适应，在网上找到了这个方式，记录一下；代码如下： //iframe自适应高度的函数 var oTime = null; function resize() {
复制链接

扫一扫