iframe(2) --- 动态设置iframe高度

最新推荐文章于 2024-02-03 00:00:00 发布

小白变怪兽

最新推荐文章于 2024-02-03 00:00:00 发布

阅读量8.7k

点赞数 1

分类专栏： javascript 文章标签： iframe

本文链接：https://blog.csdn.net/u013558749/article/details/72638776

版权

javascript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

注意：以下测试代码，编辑好后，可以用http-server打开查看效果，如果直接双击打开页面会报“Uncaught
DOMException: Blocked a frame with origin “null” from accessing a
cross-origin frame”错误。

这里介绍的是将纯粹的一个页面嵌套在iframe中，而iframe的高度也是由内容高度决定的。

首先是父页面(设置一个id主要是要在子页面中获取)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <iframe frameborder="0" height="30px" src="./linshi1.html" width="" height="" scrolling="no" id="linshiIframe"></iframe>
        <h1>我是父页面的内容～</h1>
    </body>
</html>

子页面linshi1.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body "iframeHeight()">
        <div class='beIframe'>
            <div>
                我是被嵌套的页面的内容～<br />
                我是被嵌套的页面的内容～<br />
                我是被嵌套的页面的内容～<br />
                我是被嵌套的页面的内容～<br />
                我是被嵌套的页面的内容～<br />
                我是被嵌套的页面的内容～<br />
                我是被嵌套的页面的内容～<br />
                我是被嵌套的页面的内容～<br />
                我是被嵌套的页面的内容～<br />
                我是被嵌套的页面的内容～<br />
                我是被嵌套的页面的内容～<br />
                我是被嵌套的页面的内容～<br />
                我是被嵌套的页面的内容～<br />
                我是被嵌套的页面的内容～<br />
            </div>
        </div>
        <script type="text/javascript">
             function iframeHeight(){
             // obj 这里是要获取父页面的iframe对象
                 var obj = parent.document.getElementById('linshiIframe');
             // 调整父页面的高度为此页面的高度
                 obj.height = this.document.body.scrollHeight;
             }
        </script>
    </body>
</html>

好了，如上，不管子页面中内容有多少，父页面都能够将iframe的高度撑开，从而不显示滚动条。

/…/

有的时候内嵌的页面是一个tab切换的页面，不过实现起来原理还是一样的，只不过在获取高度上，我们稍微改变一下，下面我来展示一个内嵌tab页面的js代码：

     var obj = parent.document.getElementById('imParent');
     var box = document.getElementById('box');
     var btn = document.getElementById('btn');

     var buttons = btn.getElementsByTagName('button');
     var boxes = box.children;

     for(var i = 0; i < buttons.length; i++){
          buttons[i].idx = i;
          buttons[i].onclick = function(){
          for(var i = 0; i< boxes.length; i++){
                         boxes[i].classList.remove('active');
                     }
                     boxes[this.idx].classList.add('active');
          //重点是在这儿，获取高度不再是获取body的高度；
                     obj.height = (boxes[this.idx].offsetHeight + 50) + 'px';
                     console.log('height:',boxes[this.idx].offsetHeight);
                 }
             }