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 () предоставляет управляемый механизм для безопасного обхода этого ограничения (при правильном использовании).

Источник

Change Iframe Size Automatically to Fit Content & Prevent Scrollbars

There are 2 ways to automatically change the size of an so as to fit its content and prevent scrollbars :

• For same-domain iframes : From the parent page, the complete height & width of the iframe can be found through its contentDocument.body.scrollHeight & contentDocument.body.scrollWidth properties. These values can then be set as the CSS height & width of the element.
• For cross-domain iframes : The iframe page can send a message to the parent page using postMessage() , informing about its size. On receiving the message, the parent page can change CSS height & width of the element.

Same-Domain Iframes

For same-domain iframes, code changes are required only in the parent page. The iframe page needs no code changes.

• First we need to wait for the iframe to be loaded so that its correct dimensions are available.
• After iframe has been loaded, contentDocument.body.scrollHeight property gets its full height.
• contentDocument.body.scrollWidth property gets its full width.

Cross-Domain Iframes

For cross-domain iframes, code changes are needed in both the iframe & the parent page.

The iframe page needs to be loaded first to get correct dimensions. After loading, its dimensions are passed to the parent page using postMessage() .

window.addEventListener('load', function() < let message = < height: document.body.scrollHeight, width: document.body.scrollWidth >; // window.top refers to parent window window.top.postMessage(message, "*"); >); 

Demo

The demo uses a same-origin iframe. It uses setInterval() to keep checking the iframe size at intervals of 500ms.

Download Codes
(Note that even though the files contain only HTML, you must run them from a server)

Источник

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.

Источник