Сделать так, чтобы iframe автоматически настраивал высоту в соответствии с содержимым без использования полосы прокрутки? [Дубликат]
Я хочу, чтобы он мог регулировать его высоту в соответствии с содержимым внутри него, не используя прокрутку.
Это можно сделать с помощью CSS. В CSS есть концепция, называемая медиазапросами, в которой размер контента изменяется в соответствии с размером экрана.
«Угловой . » т.е. требуется Javascript? Другими словами, нельзя делать это на межсайтовых фреймах (из-за ограничений межсайтового скриптинга), верно? Как подсказывает @ clankill3r, это демонстрирует необходимость чистого CSS-решения этой проблемы!
17 ответов
И измените ваш iframe на это:
Это не будет работать, если iframe содержит контент из другого домена из-за одной и той же политики происхождения , есть другой вопрос о SO с некоторыми междоменными решениями stackoverflow.com/questions/5589756/…
Решения, кажется, не работают, если содержание iframe имеет изменение высоты на js (например, слайдер)
Это еще несколько вопросов, которые необходимо учитывать: изменение содержимого в iframe, изменение размера браузера, загрузка iframe при первой проверке и междоменном домене. Я собрал небольшую библиотеку, потому что я не мог найти решение, которое охватывало бы каждую проблему. github.com/davidjbradshaw/iframe-resizer
это не полное решение, поэтому, конечно, иногда оно не может работать. Например, если iframe содержит форму, с проверкой JS, после появления блоков ошибок будет отображаться полоса прокрутки. Поэтому существует необходимость в дополнительном обработчике изменения размера, который будет запускать функцию resizeIframe.
Также обнаружилось, что это прекрасно работает в Chrome, но в Firefox и IE содержимое немного обрезано внизу.
К сожалению, этот метод не является надежным на 100%. Если соединение медленное, и iframe не загружается при запуске функции, высота не будет отрегулирована. Это связано с тем, что загрузка прослушивает только элементы страницы, а не содержимое iframe.
Это не работает с элементами, которые «свертываются», например, datatables или плавающие div. Высота зависит от того, какой будет нормальная развернутая высота, а не от конечной высоты.
@ hjpotter92 Это отличное решение. Я искал iframe auto fit / resizer, и это единственное, что сработало для меня (с или без div), и я много пробовал с прошлой ночи. Немного больше информации: я использую bootstrap 3, и многие другие решения JS / CSS не работали, так как не изменили бы его размер по вертикали в зависимости от содержимого, получаемого из БД. Просто хотел сказать спасибо, ура
@ hjpotter92 Приложение к моему комментарию. (Небольшая ошибка) Хотя в нижней части есть небольшое обрезание, где, например, с буквой, которая опускается ниже строки набора текста, такой как «g», его хвост обрезается, просто подумав, что вы / другие могли бы захотеть знаю и посмотрю, смогу ли я придумать решение для этого.
@ Fred-ii- Возможно, добавление дополнительного font-size к высоте объекта должно решить эту проблему.
@ hjpotter92 Да, или я видел комментарий в ответе (внутри того же вопроса) , где я изменил вашу строку так, чтобы она читалась как obj.style.height = (obj.contentWindow.document.body.scrollHeight +5) + ‘px’; который работал (для меня) прекрасно, и я могу жить с этим. Хотя, я мог бы, возможно, просто добавить дополнительную
под моей последней записью в db в php. Всегда есть способ 😉
Это только заставит iframe расти. Это никогда не уменьшится. Положите obj.style.height = 0, прежде чем читать рост.
Как вы можете видеть, теперь вы получаете iframe для ссылки test1 высотой 648px и для ссылки test2 высотой 2200px и для ссылки test3 высотой 440px и т. Д. Вы можете добавить столько ссылок, сколько захотите, используя столько размеров sizez, сколько ты хочешь. Единственным недостатком этого кода является то, что он работает только для одного iframe на странице, не более одного и родительских кодов из iframe не работают ни в одном браузере, кроме проводника. Но вы можете использовать _self, _top и _blank или имена целей. Не _parent, это не работает.
@SeekLoad Использование ссылки jsfiddle.net было бы проще =) Я обновлю свой ответ выше фрагментом кода, если бы вы могли предоставить мне пример минимальной, полной и проверяемой ссылки jsfiddle.
ПРИМЕЧАНИЕ. Я знаю, что на этот вопрос уже дан ответ, но я ПРОВЕРИЛ все ответы, и ни один из них не работал должным образом, и так, как был задан вопрос, поэтому я поиграл с кодами и нашел ответ, который работает.
@ hjpotter92 Самый простой способ сделать это, если вы спросите меня, — это просто сделать файл HTML / HTM на своем компьютере и протестировать код. Вот как я это делаю, не нужны ссылки и онлайн-эмуляторы такие. Таким образом, вы точно знаете, как и если это работает. Также советуем протестировать более чем один браузер, чтобы увидеть, работает ли он на нескольких платформах.
@ hjpotter92 Поскольку ответ на этот вопрос помечен как ответ, хотя помеченный ответ не работал должным образом, я не могу поставить другой ответ, хотя мой ответ работает правильно. Поэтому лучшее, что я могу сделать для вас, если вы хотите онлайн-эмулятор и не тестируете его на своем компьютере, — это поместить его в онлайн-эмулятор и дать вам ссылку.
@ hjpotter92 Скажите мне, что хорошего в коде, если вы проверяете его, и он проверяется, но на самом деле он не работает, выполняя свою работу на веб-странице? Мой код не может быть проверен W3, но это НЕ НУЖНО, так как важная часть заключается в том, что он работает и выполняет свою работу. Если вы можете заставить его работать и правильно выполнять работу, и в то же время проходить валидацию, я рад, что такое решение может быть принято. На данный момент я еще не нашел проверенный код, который работает правильно еще. Я предпочел бы иметь не проверенный код W3, который работает, а затем утвержденный проверенный код, который не работает.
Вот тест на codepen.io/SeekLoad/pen/yEdQBK , но вам все равно нужно скопировать его в браузер, чтобы он работал.
Html iframe min height
Тег (от англ. inline frame — встроенная рамка) создаёт встроенный фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
.
Изображения и мультимедиа
Синтаксис¶
Закрывающий тег обязателен.
Атрибуты¶
allow Определяет политику элемента allowfullscreen Разрешает для фрейма полноэкранный режим. Этот атрибут считается устаревшим атрибутом и переопределяется как allow=»fullscreen» . allowpaymentrequest Установите в значение true , если нужно разрежить вызывать функции API платежей. Этот атрибут считается устаревшим атрибутом и переопределяется как allow=»payment» . height Высота фрейма. name Имя фрейма. referrerpolicy Указывает, какой реферер отправить при получении ресурса фрейма sandbox Позволяет задать ряд ограничений на контент загружаемый во фрейме. scrolling Способ отображения полосы прокрутки во фрейме. seamless Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа. src Путь к файлу, содержимое которого будет загружаться во фрейм. srcdoc Хранит содержимое фрейма непосредственно в атрибуте. width Ширина фрейма.
allowfullscreen¶
Атрибут allowfullscreen разрешает для фрейма полноэкранный режим.
iframe allowfullscreen>iframe> Значение по умолчанию
По умолчанию этот атрибут выключен.
height¶
Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height . Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится элемент . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=»100%» означает, что фрейм будет занимать всю ширину веб-страницы.
Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300х150 пикселей.
Любое целое положительное число в пикселях или процентах.
Значение по умолчанию
width — 300 пикселей, height — 150 пикселей.
name¶
В обычном HTML-документе при переходе по ссылке в окне браузера текущий документ заменяется новым. Чтобы направить содержимое во фрейм, он должен иметь уникальное имя, задаваемое атрибутом name . В этом случае при создании ссылки у требуется указать атрибут target , в качестве значения которого выступает имя фрейма.
Для указания имени используется набор символов, включая числа и буквы. При обращении к фрейму по имени соблюдайте то же написание, что и в атрибуте name .
Значение по умолчанию
sandbox¶
Атрибут sandbox позволяет установить ряд ограничений на контент, загружаемый во фрейме, к примеру, блокировать формы и скрипты. Это позволяет повысить безопасность текущего документа, особенно в том случае, когда во фрейм загружается документ из непроверенного источника.
iframe src="URL" sandbox="allow-same-origin || allow-top-navigation || allow-forms || allow-scripts" >iframe> allow-forms Позволяет содержимому фрейма отправлять формы. allow-modals Разрешает открытие модальных окон, вроде тех, которые делаются с помощью функции alert в JavaScript. allow-orientation-lock Позволяет отключать возможность блокировки экрана. allow-pointer-lock Позволяет фрейму использовать Pointer Lock API. allow-popups Разрешает всплывающие окна (такие как window.open , target=»_blank» , showModalDialog ). allow-presentation Разрешает фрейму использовать Presentation API. allow-same-origin Разрешает загружать содержание фрейма, воспринимая его из того же источника, что и родительский документ. Может использоваться для безопасного открытия контента, блокируя при этом всплывающие окна. allow-scripts Разрешает запуск и выполнение скриптов. Создание всплывающих окон при этом запрещено. allow-top-navigation Позволяет открывать ссылки фрейма в родительском документе.
Допустимо писать несколько значений в любом порядке через пробел. Если указано пустое значение, то устанавливаются все возможные ограничения.
При одновременном использовании значений allow-scripts и allow-same-origin , когда исходный и загружаемый документ одного происхождения, атрибут sandbox игнорируется.
Значение по умолчанию
scrolling¶
Если содержимое фрейма не помещается в отведённые размеры, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется атрибут scrolling .
iframe scrolling="auto | no | yes">. iframe> - auto — Полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
- no — Запрещает отображение полос прокрутки.
- yes — Всегда вызывает появление полос прокрутки, независимо от объёма информации.
Значение по умолчанию
seamless¶
Устанавливает, что содержимое фрейма должно отображаться так, словно оно является частью документа. При этом соблюдается ряд условий:
- игнорируется атрибут sandbox , если содержимое фрейма и родительского документа взяты из одного источника;
- ссылки во фрейме открываются не внутри фрейма, а в текущем документе;
- стили родительского документа применяются и к содержимому фрейма;
- фрейм считается блочным элементом, у которого ширина задана как auto ;
- высота формируется автоматически на основе содержимого.
Значение по умолчанию
По умолчанию этот атрибут выключен.
src¶
Указывает адрес файла, который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
srcdoc¶
HTML-код содержимого, включая необходимые теги.
Значение по умолчанию
width¶
Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height . Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится элемент . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=»100%» означает, что фрейм будет занимать всю ширину веб-страницы.
Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300х150 пикселей.
Любое целое положительное число в пикселях или процентах.
Значение по умолчанию
width — 300 пикселей, height — 150 пикселей.
Спецификации¶
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
html> head> meta charset="utf-8" /> title>IFRAMEtitle> head> body> iframe src="page/banner.html" width="468" height="60" align="left" > Ваш браузер не поддерживает встроенные фреймы! iframe> body> html>