Встраивание iframe, когда высота iframe является переменной

Question

У меня есть iframe с переменной высотой, который не известен заранее.

В настоящее время, если раздел, в который загружается iframe, слишком мал, iframe загружается с внутренними полосами прокрутки ( пример ).Если iframe оказался более коротким, то перед началом нижнего колонтитула под iframe есть свободное место ( пример ).

Есть ли решение для этого типа проблемы?

Answer 1

У меня была ситуация, когда высота содержимого iFrame изменялась динамически, и я сказал родительскому фрейму (содержащему iFrame) соответственно изменить его высоту, используя postMessage: как это

Родительское окно:

 <section class="module">
                <div class="row">
                    <!-- Content column start -->
                    <div class="col-sm-12" id="web-version-container">
                         <iframe id="web-version-frame" src="index.html" allowfullscreen=false frameborder="0" style="width:100%; height:100%;min-height:800px;">
                        </iframe>
                    </div>
                </div> <!-- .row -->    
        </section>

        <script>            
        window.addEventListener('message', function(event) { 
            // IMPORTANT: Check the origin of the data! 
            if (~event.origin.indexOf('https://yourdomain.com')) { 
                // The data has been sent from your site 

                if (event.data.messageName) {
                        switch (event.data.messageName) {
                            case "documentHeight":
                            if (event.data.messageValue && parseInt(event.data.messageValue) > 500);
                            var newHeight = parseInt(event.data.messageValue) + 50;
                            $("#web-version-frame").css("height",newHeight.toString() + "px"); 
                            break;
                    }
                }
                // The data sent with postMessage is stored in event.data 
            } else { 
                // The data hasn't been sent from your site! 
                // Be careful! Do not use it. 
              return; 
            } 
            }); 

        </script>

Дочернее окно:

if (window.parent) {
          window.parent.postMessage(
            {
              messageName: "documentHeight",
              messageValue: $(".content-active").height()
            },
            "*"
          );
        }

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Answer 2

По поводу моего комментария.Первое, что вам нужно решить, это проблема перекрестного происхождения.Большинство браузеров блокируют запросы к другим веб-сайтам, если ответ не включает текущий хост в заголовок разрешения перекрестного происхождения.Так что в вашем случае заголовок вашего запроса к содержимому iframe должен включать заголовки

Access-Control-Allow-Origin: http://159.89.229.184

и

Access-Control-Allow-Mehtods: GET

Также см. https://de.wikipedia.org/wiki/Cross-Origin_Resource_Sharing для получения дополнительной информации по этому вопросу..

---

Теперь к фактическому решению.

Вам необходимо определить высоту содержимого вашего фрейма и затем соответственно установить высоту.Вы можете сделать это, добавив функцию JavaScript.В секции head добавьте

 <script>
     const setHeight = (frame) => {
       frame.style.height = `${frame.contentWindow.document.body.scrollHeight}px`
     }
 </script>

, и ваш iframe должен включить событие onload

<iframe ... scrolling="no" onload="setHeight(this)" />

Это должно решить вашу проблему.Но, как я уже упоминал, только если вы разрешите перекрестный доступ.В противном случае доступ к документу из frame.contentWindow будет отклонен с ошибкой типа

VM747: 1 Uncaught DOMException: заблокирован кадр с источником "http://159.89.229.184" от доступа к фрейму перекрестного происхождения.

Я также сделал пример с глюкозой, чтобы продемонстрировать, как она работает (нажмите «Показать», чтобы увидеть его в действии)

https://glitch.com/edit/#!/iframe-varialbe-height

Answer 3

Что ж, добавление простого кода JS для получения высоты содержимого iframe и установка высоты контейнера подойдет, как предложено @relief.melone.

Другое простое решение, которое может бытьпомощь, как альтернатива: https://github.com/davidjbradshaw/iframe-resizer

Answer 4

В iframe, который вы добавили во втором примере, свойство css min-height равно 1600px. Используйте процент для минимальной высоты или высоты, чтобы исправить проблему. Добавлена ​​минимальная высота: 275vh; и это решило проблему.

.job-detail-iframe iframe{
    width: 100%;
    min-height: 275vh;
}

Проверьте это также в качестве ссылки.