gpt4 book ai didi

javascript - 在选项卡更改时动态更改 iframe 的高度?

转载 作者:行者123 更新时间:2023-11-28 02:31:47 25 4
gpt4 key购买 nike

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com