Javascript 在选项卡更改时动态更改iframe的高度？_Javascript_Html_Css_Iframe_Web

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

javascript html css iframe web

Javascript 在选项卡更改时动态更改iframe的高度？,javascript,html,css,iframe,web,Javascript,Html,Css,Iframe,Web,我开发了一段代码，但有一个问题我无法解决。问题是iframe仅在第一个选项卡中动态地获取内容的高度，而在其他选项卡中不显示任何内容 <body> <jsp:include page="header.html" /> <div class="container-fluid text-center"> <div class="col-sm-12" style="margin-top:120px">

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














功能调整框架（obj）{
obj.style.height=obj.contentWindow.document.body.scrollHeight+'px'；
}

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

假设您正在使用引导

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

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


[内容]

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

你能发布一个提琴或其他东西吗？如果我需要在提琴上显示，我应该更改src等内容。问题是，iframe只在第一个选项卡中动态显示内容的高度。其余选项卡没有显示任何内容。为了给你一个关于iframe问题确切位置的更详细答案，查看css会有所帮助。更有用的是通过codepen或fiddlecode查看此网站，因为某些原因，fiddle上无法使用此代码。这里有完整的源代码，好吧，我知道我建议的更改似乎不会影响iframe加载，但是当页面上有很多问题时，很难指出并纠正一个问题。我建议您添加行，更正类“in”引导没有类“in”，所以您一定是在尝试淡入还是其他什么？无论哪种方式，都可以从第一个中取出“.in”，或者将其添加到其他项中。一旦你做了这些更正，你的页面的行为将有希望告诉你为什么你的iFrame不工作，或者可能修复这个问题。如果我的更正没有任何效果，那么我将开始查看你的iFrame的src，并确保它们真的与文件匹配。你的代码看起来是正确的（除了我的第一个建议），所以我不明白为什么它不能工作，一定是一些小的技术错误。