File Upload

Отрегулируйте ширину и высоту iframe, чтобы соответствовать содержанию в нем

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

35 ответов

Однострочное решение для встраивания: начинается с минимального размера и увеличивается до размера содержимого. нет необходимости в тегах сценария.

Кросс-баузер, кросс-доменная библиотека, которая использует mutationObserver чтобы размер iFrame соответствовал содержанию и postMessage общаться между iFrame и главной страницей. Работает с или без JQuery.

Все приведенные к настоящему моменту решения учитывают только один раз изменение размера. Вы упоминаете, что хотите изменить размер iFrame после изменения содержимого. Чтобы сделать это, вам нужно выполнить функцию внутри iFrame (как только содержимое будет изменено, вам нужно запустить событие, чтобы сказать, что содержимое изменилось).

Я застрял с этим некоторое время, так как код внутри iFrame казался ограниченным DOM внутри iFrame (и не мог редактировать iFrame), а код, выполняемый за пределами iFrame, был застрял с DOM вне iFrame (и не мог забрать событие изнутри iFrame).

Решение пришло из обнаружения (с помощью коллеги), что jQuery может сказать, какой DOM использовать. В этом случае DOM родительского окна.

Таким образом, такой код делает то, что вам нужно (при запуске внутри iFrame):

Если содержимое iframe принадлежит одному домену, это должно работать отлично. Это требует JQuery, хотя.

Чтобы динамически изменить его размер, вы можете сделать это:

Затем на странице загрузки iframe добавьте:

Вот кросс-браузерное решение, если вы не хотите использовать jQuery:

/** * Resizes the given iFrame width so it fits its content * @param e The iframe to resize */ function resizeIframeWidth(e) < // Set width of iframe according to its content if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax e.width = e.contentWindow.document.body.scrollWidth; else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax e.width = e.contentDocument.body.scrollWidth + 35; else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8 e.width = e.contentDocument.body.offsetWidth + 35; >

После того, как я попробовал все на земле, это действительно работает для меня.

 html, body    This is a test. 
testing  

Я провел тестирование в Chrome и немного в Firefox (в Windows XP). У меня еще есть тесты, поэтому, пожалуйста, расскажите, как это работает для вас.

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

Я просто удалил вложенную функцию click() и поместил ее в свой HTML-код iframe:

Работал для меня, но не уверен насчет кросс-браузерной функциональности.

Все не может работать с использованием вышеуказанных методов.

Конверт: IE 10, Windows 7 x64

Если вы можете жить с фиксированным соотношением сторон и хотите адаптивный iframe, этот код будет вам полезен. Это просто правила CSS.

.iframe-container < overflow: hidden; /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 0.5625) */ padding-top: 56.25%; position: relative; >.iframe-container iframe

В iframe должен быть div в качестве контейнера.

Исходный код основан на этом сайте, и у Бена Маршалла есть хорошее объяснение.

Я читал здесь много ответов, но почти каждый дал какой-то блок кадра с перекрестным происхождением.

Uncaught DOMException: заблокировал фрейм с нулевым источником доступа к фрейму с перекрестным источником.

То же самое для ответов в связанной теме:

Я не хочу использовать стороннюю библиотеку, например iFrame Resizer или аналогичная библиотека.

я использую width="100%" для но код также можно изменить для работы с шириной.

Вот как я решил установить индивидуальную высоту для:

iframe source , пример из Create React App но только HTML а также JS используется.

Код, конечно, можно изменить, но он очень хорошо работает с динамическим контентом. setInterval активируется только в том случае, если контент встроен в iframe а также postMessage отправляет сообщение только при изменении высоты.

Вы можете узнать больше о Window.postMessage() здесь, но описание очень хорошо подходит для того, чего мы хотим достичь:

Метод window.postMessage () безопасно разрешает обмен данными между объектами Window между источниками; например, между страницей и всплывающим окном, которое она породила, или между страницей и встроенным в нее iframe.

Обычно сценариям на разных страницах разрешен доступ друг к другу тогда и только тогда, когда страницы, из которых они происходят, используют один и тот же протокол, номер порта и хост (также известный как «политика одного источника»). window.postMessage () предоставляет управляемый механизм для безопасного обхода этого ограничения (при правильном использовании).

Источник

How to adjust the width and height of an iframe to fit with content in it HTML?

We can adjust the width and height of an iframe by using CSS to set the dimensions. This can be done by setting the width and height properties to a specific value or to a percentage of the parent container. Additionally, we can use JavaScript to dynamically adjust the dimensions based on the content within the iframe. The term iframe is short for Inline frame.

Here are the possible approaches −

Using JavaScript

You can use JavaScript to adjust the width and height of an iframe to fit its content. This can be done by getting the element of the iframe and then setting its width and height properties to the values of the content inside −

Using CSS

You can also use CSS to adjust the width and height of an iframe to fit its content. This can be done by setting the width and height properties of the iframe to 100% and then using the padding-bottom property to adjust the height of the iframe based on the aspect ratio of the content inside −

 #myiframe

Using HTML

You can also use HTML to adjust the width and height of an iframe to fit its content. This can be done by setting the width and height attributes of the iframe element to 100% −

Note − Keep in mind that when using JavaScript or CSS to adjust the size of an iframe, it can cause issues with cross-domain iframes as the browser may block access to the content inside the iframe. It is recommended to use the HTML method in this case.

Example

Here is a full working example of using JavaScript to adjust the width and height of an iframe to fit its content −

    window.onload = function()   

Источник

IFrame width Property

The width property sets or returns the value of the width attribute in an iframe element.

The width attribute specifies the width of an iframe.

Tip: Use the height property to set or return the value of the height attribute in an iframe.

Browser Support

Syntax

Return the width property:

Property Values

Technical Details

More Examples

Example

Return the width of an iframe:

Example

Change the height and width of an iframe:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник