在选项卡更改时动态更改 iframe 的高度？答案

【问题标题】：Change height of iframe dynamically on tab change?在选项卡更改时动态更改 iframe 的高度？
【发布时间】：2018-10-16 00:35:51
【问题描述】：

我有一段我开发的代码，但有一个我无法解决的问题。问题是 iframe 仅在第一个选项卡中动态获取内容高度，但在其他选项卡中不显示任何内容。

<body>
    <jsp:include page="header.html" />

    <div class="container-fluid text-center">

        <div class="col-sm-12" style="margin-top:120px">

            <ul class="nav nav-pills nav-justified">
                <li class="active">
                    <a data-toggle="pill" href="#projectOverview">OVERVIEW</a>
                </li>
                <li>
                    <a data-toggle="pill" href="#projectPosts">POSTS</a>
                </li>
                <li>
                    <a data-toggle="pill" href="#projectThreads">THREADS</a>
                </li>
                <li>
                    <a data-toggle="pill" href="#projectMembers">MEMBERS</a>
                </li>
                <li>
                    <a data-toggle="pill" href="#projectTasks">TASKS</a>
                </li>
            </ul>

        </div>

        <div class="tab-content col-sm-12">
            <div id="projectOverview" class="tab-pane fade in active">
                <iframe src="projectOverview.jsp" name="iframe" scrolling="no" id="iframe1" onload="resizeIframe(this)" style="width:100%; border: 0px">
                </iframe>
            </div>
            <div id="projectPosts" class="tab-pane fade">
                <iframe src="projectPosts.jsp" name="iframe" scrolling="no" id="iframe2" onload="resizeIframe(this)" style="width:100%; border: 0px">
                </iframe>
            </div>
            <div id="projectThreads" class="tab-pane fade">
                <iframe src="projectThreads.jsp" name="iframe" scrolling="no" id="iframe3" onload="resizeIframe(this)" style="width:100%;border: 0px">
                </iframe>
            </div>
            <div id="projectMembers" class="tab-pane fade">
                <iframe src="projectMembers.jsp" name="iframe" scrolling="no" id="iframe4" onload="resizeIframe(this)" style="width:100%; border: 0px">
                </iframe>
            </div>
            <div id="projectTasks" class="tab-pane fade">
                <iframe src="projectTasks.jsp" name="iframe" scrolling="no" id="iframe5" onload="resizeIframe(this)" style="width:100%;border: 0px">
                </iframe>
            </div>
        </div>

    </div>
    <jsp:include page="footer.html" />
</body>
<script>
    function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';

    }
</script>

</html>

请看一下并告诉我错误在哪里以及如何解决它。

【问题讨论】：

你能发个小提琴什么的吗...
如果我需要在小提琴上显示我应该更改 src 等内容。问题是 iframe 仅在第一个选项卡中动态获取内容的高度。其余选项卡什么都不显示跨度>

标签： javascript html css iframe web

【解决方案1】：

假设您正在使用引导程序...

此代码的一个问题是您没有将列包装在 .row 中。应该这样写：

<div class="container">
<div class="row">
<div class="col-sm-12">
[content]
</div>
</div>
</div>

代码的另一个潜在问题可能是您将“.in”类提供给了第一个 iframe 的父 div，但没有将其提供给其余部分。很可能所有这些父 div 的唯一区别应该是您拥有“.active”类的一个实例

【讨论】：

为了更详细地回答 iframe 问题的确切位置，查看 css 会很有帮助。通过 codepen 或 fiddle 查看该站点会更有帮助
代码由于某种原因在小提琴上不起作用。完整的源代码在这里drive.google.com/open?id=1T6mmdh97BqBqizjQMT0iFzu2SHoSWIDn
好的，我知道我建议的更改似乎不会影响 iframe 加载，但是当页面上有很多问题时，很难确定并纠正一个问题。我建议添加你的行，更正“in”类引导程序没有“in”类，所以你一定是在尝试淡入或其他什么？无论哪种方式，要么先取出“.in”，要么将其添加到其他人。一旦您进行了这些更正，您的页面行为方式有望更多地说明您的 iframe 无法正常工作的原因，或者可能解决问题。
如果我的更正完全没有效果，那么我将开始查看您的 iframe 的 src 并确保它们与文件真正匹配。你的代码看起来是正确的（除了我的第一个建议）所以我不明白为什么它不起作用，一定是一些小的技术错误。