在选项卡更改时动态更改 iframe 的高度？
Posted
技术标签:
【中文标题】在选项卡更改时动态更改 iframe 的高度？【英文标题】：Change height of iframe dynamically on tab change? 【发布时间】：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 仅在第一个选项卡中动态获取内容的高度。其余选项卡什么都不显示跨度> 【参考方案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 并确保它们与文件真正匹配。你的代码看起来是正确的（除了我的第一个建议）所以我不明白为什么它不起作用，一定是一些小的技术错误。以上是关于在选项卡更改时动态更改 iframe 的高度？的主要内容，如果未能解决你的问题，请参考以下文章