Question

我有一段我开发的代码，但是有一个我无法解决的问题。问题是，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>

请查看并告诉我错误的位置以及解决方法。

Answer 1

假设你正在使用bootstrap ...

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

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

代码的另一个潜在问题可能是你给第一个iframe的父div的类“.in”，但没有给出其余的。最有可能的是，所有这些父div中的唯一区别应该是您拥有“.active”类的一个实例

在标签更改时动态更改iframe的高度？

1 个答案: