проблема в настройке высоты iframe на веб-странице - PullRequest
Новая
       24

проблема в настройке высоты iframe на веб-странице

0 голосов
/ 02 апреля 2019

enter image description here У меня есть простая веб-страница, созданная с помощью bootstrap.now. Я хочу встроить ее в другую веб-страницу, но у меня проблема с настройкой высоты. вот моя веб-страница: 

 <html> 
        <head>
        <style>
            #above1 { margin-bottom:6px; }
            #iframe1 { height:100%; width:100%; border: 1px solid #0094ff; border-radius:3px; padding-top:6px;  }
        </style>
        </head>
        <body>
            <div class="container-fluid">
                <div id="above1">        
                    <div class="row"> [content here]</div>
                    <div class="row"> [more content here]</div>
                </div>
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <iframe id="iframe1" src="home.html"></iframe>
                    </div>
                 </div>
            </div>
        </body>
    </html>

вот моя домашняя страница home.html, которую я хочу добавить: 

`<htlm>
    <head>
    </head>

    <body>
        <div class="container-fluid">
                    <div class="row" >
                <div class="col-md-6">

                    <img src="image/2.png" >
                </div>

                <div class="col-md-6">

                            <img src="image/1.png" >
                        </div>


            </div>
                    </div>
    </body>
    </html>`

когда я это реализовал, у меня появилась полоса прокрутки в iframe, как мне решить эту проблему?

1 Ответ

0 голосов
/ 02 апреля 2019

Удалить height и width в # iframe1

Этот скрипт поможет вам автоматически настроить width и height фрейма, чтобы он соответствовал содержанию в нем. 

<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iframe1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe id="iframe1" src="home.html"></iframe>
...