Изменить высоту iframe динамически на вкладке изменить? - PullRequest
Новая
       6

Изменить высоту iframe динамически на вкладке изменить?

0 голосов
/ 05 мая 2018

У меня есть кусок кода, который я разработал, но есть проблема, которую я не могу исправить. Проблема в том, что 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 Ответ

0 голосов
/ 05 мая 2018

Предполагается, что вы используете загрузчик ...

Одна проблема с этим кодом состоит в том, что вы не обернули свои столбцы в .row. это должно быть написано так: 

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

Еще одной потенциальной проблемой с кодом может быть класс ".in", который вы передали родительскому div первого iframe, но не передали его остальным. Скорее всего, единственное различие во всех этих родительских элементах div должно заключаться в том, что у вас есть класс ".active"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...