Как подогнать размер под динамический iframe?

Ссылка скопирована
1 ответ

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

Дополнительно:

У меня была форма, которая была встроена через iframe на страницу. Поля и их количество были динамическими. Стояла такая же задача.
Использовал это решение - https://github.com/davidjbradshaw/iframe-resizer
Подключаете один js файл на страницу, куда встраивате iframe.
Второй js файл уже на самой iframe странице. В целом, ничего сложного, там все описано. Работает хорошо, в том числе и на мобидльной версии.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Мария Код Ответ

Для того, чтобы подогнать размер динамического iframe под содержимое внутри него, можно воспользоваться следующими шагами:

1. Сначала необходимо получить высоту содержимого внутри iframe. Для этого можно воспользоваться JavaScript. Например, если у вас есть iframe с id "myIframe", то вы можете получить высоту содержимого следующим образом:

var iframe = document.getElementById('myIframe');
var height = iframe.contentWindow.document.body.scrollHeight;

var iframe = document.getElementById('myIframe'); var height = iframe.contentWindow.document.body.scrollHeight;

2. Далее, задайте полученную высоту как высоту iframe. Например:

iframe.style.height = height + 'px';

iframe.style.height = height + 'px';

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

iframe.contentWindow.document.body.addEventListener('resize', function() {
  var height = iframe.contentWindow.document.body.scrollHeight;
  iframe.style.height = height + 'px';
});

iframe.contentWindow.document.body.addEventListener('resize', function() { var height = iframe.contentWindow.document.body.scrollHeight; iframe.style.height = height + 'px'; });

Таким образом, при каждом изменении размера содержимого в iframe, высота iframe будет автоматически подстраиваться под новое содержимое.

Надеюсь, эти шаги помогут вам подогнать размер динамического iframe под содержимое внутри него. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно