在更改標簽頁后動態更改iframe的高度？
[英]Change height of iframe dynamically on tab change?
問題描述
我有一段代碼是我開發的，但是有一個我無法解決的問題。 問題是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>
請看看並告訴我錯誤在哪里以及如何解決。
1 個解決方案
解決方案1
0 2018-05-05 19:45:49
假設您正在使用引導程序...
此代碼的一個問題是您沒有將列包裝為.row。 它應該這樣寫：
<div class="container">
<div class="row">
<div class="col-sm-12">
[content]
</div>
</div>
</div>
該代碼的另一個潛在問題可能是“ .in”類，您給了第一個iframe的父div，而沒有給其余的idiv。 所有這些父div中唯一的區別很可能應該是您擁有“ .active”類的一個實例
動態更改iframe的高度？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.