我有一段自己开发的代码，但有一个问题我无法解决。问题是 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>
请看一下，告诉我错误在哪里，如何解决。
最佳答案
假设您正在使用 bootstrap...
此代码的一个问题是您没有将列包装在 .row 中。应该这样写:
<div class="container">
<div class="row">
<div class="col-sm-12">
[content]
</div>
</div>
</div>
代码的另一个潜在问题可能是您为第一个 iframe 的父 div 提供的类“.in”，但没有将其提供给其余部分。很可能所有这些父 div 的唯一区别应该是您拥有“.active”类的一个实例
关于javascript - 在选项卡更改时动态更改 iframe 的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50193283/