Как заставить этот iframe изменять размер в зависимости от содержимого?

На чтение 3 мин Опубликовано 17.09.2024

Вопрос или проблема

Я испытываю огромные трудности с тем, чтобы iframe изменял размер в соответствии с его содержимым. Я попробовал множество различных “решений”, опубликованных на форумах, и сейчас использую решение с https://iframe-resizer.com/.

Вот страница для тестирования, с которой я работаю: https://mcpirstaging.wpenginepowered.com/maine-legislature/

Вот код на родительской странице:

<iframe id="myIframe" src="https://george-mainemonitor.github.io/my-reps/" style="width: 100%;height: 100vh;border:none;"></iframe>

<script src="/wp-admin/js/iframe-resizer.parent.js"></script>
<script>
  iframeResize({ license: 'GPLv3', waitForLoad: true }, '#myIframe');
</script>

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

Не вижу никаких ошибок. Есть идеи, что может происходить и как это решить? Спасибо.

Ответ или решение

Чтобы iframe корректно изменял свой размер в зависимости от контента, вам необходимо убедиться, что используемое вами решение и настройки выполнены правильно. Рассмотрим несколько шагов, которые могут помочь вам разрешить проблему с пустым пространством и несоответствием размера:

Проверка корректности подключения скриптов: Убедитесь, что скрипт iframe-resizer.parent.js правильно подключен и загружается без ошибок. Проверьте консоль разработчика в браузере на наличие ошибок.
Настройка iframe-resizer: Убедитесь, что параметры, передаваемые в функцию iframeResize, соответствуют вашим целям. Например, попробуйте добавить или изменить опции, такие как log, которая поможет вам увидеть, какие размеры передаются в родительский документ. Пример:
```
iframeResize({ 
   log: true,
   license: 'GPLv3', 
   waitForLoad: true 
}, '#myIframe');
```
Сторона контента: Убедитесь, что код, который находится внутри iframe, корректно настроен для отправки сообщения о ее размере родительскому окну. Если у вас есть доступ к содержимому iframe, проверьте, что в коде, который выполняется в iframe, установлен скрипт iframe-resizer.contentWindow.js. Пример подключения выглядит так:
```
<script src="path/to/iframe-resizer.contentWindow.js"></script>
```
Это гарантирует, что iframe отправляет информацию о своем размере обратно в родительское окно.
Обработка изменений в контенте: Если содержимое iframe динамическое (например, с подгрузкой через AJAX или изменениями при взаимодействии пользователя), вам может потребоваться вызвать метод sendMessage для уведомления родительского окна об изменении размеров. Убедитесь, что у вас есть код, который обрабатывает успешное изменение высоты.
Установка высоты iframe: В случае если указанные шаги не помогают, вы можете попробовать установить начальную высоту iframe через JavaScript, основываясь на ожидании содержимого:
```
var myIframe = document.getElementById('myIframe');
myIframe.onload = function() {
   myIframe.style.height = myIframe.contentWindow.document.body.scrollHeight + 'px';
};
```
Отладка и тестирование: Используйте инструменты разработчика в браузере для детальной отладки процесса. Проверьте размеры всплывающего окна, через которое вы загружаете контент и убедитесь, что настройки CSS не конфликтуют с правильным масштабированием.

Следуя этим шагам, вы сможете настроить ваш iframe так, чтобы он подстраивался под контент и снижал количество пустого пространства. Убедитесь, что у вас есть доступ к обеим частям кода (родительскому и содержимому iframe), чтобы гарантировать правильную интеграцию и взаимодействие.