HTML iframe використовується для відображення вкладеної веб-сторінки (веб-сторінки всередині веб-сторінки). HTML
HTML iframe вставляє інший документ у поточний HTML-документ у прямокутну область.
Вміст веб-сторінки та вміст iframe можуть взаємодіяти один з одним за допомогою JavaScript.
рядок містить
Синтаксис iframe
HTML iframe визначається за допомогою
<iframe src="URL"></iframe>
Тут атрибут 'src' визначає веб-адресу (URL) сторінки вбудованого фрейму.
Встановіть ширину та висоту iframe
Ви можете встановити ширину та висоту iframe за допомогою атрибутів «width» і «height». За замовчуванням значення атрибутів вказуються в пікселях, але ви також можете встановити їх у відсотках. тобто 50%, 60% тощо.
Приклад: (пікселі)
<h2>HTML Iframes example</h2> <p>Use the height and width attributes to specify the size of the iframe:</p> <iframe src="https://www.javatpoint.com/"></iframe>Перевірте зараз
Приклад: (відсоток)
<h2>HTML Iframes</h2> <p>You can use the height and width attributes to specify the size of the iframe:</p> <iframe src="https://www.javatpoint.com/"></iframe>Перевірте зараз
Ви також можете використовувати CSS для встановлення висоти та ширини iframe.
приклад:
<h2>HTML Iframes</h2> <p>Use the CSS height and width properties to specify the size of the iframe:</p> <iframe src="https://www.javatpoint.com/"></iframe>Перевірте зараз
Видалити рамку iframe
За замовчуванням iframe містить межу навколо себе. Ви можете видалити рамку за допомогою атрибута та властивості CSS border.
приклад:
<h2>Remove the Iframe Border</h2> <p>This iframe example doesn't have any border</p> <iframe src="https://www.javatpoint.com/"></iframe>Перевірте зараз
Ви також можете змінити розмір, колір, стиль рамки iframe.
приклад:
<h2>Custom Iframe Border</h2> <iframe src="https://www.javatpoint.com/"></iframe>Перевірте зараз
Ціль iframe для посилання
Ви можете встановити цільовий фрейм для посилання за допомогою iframe. Вказаний цільовий атрибут посилання має посилатися на атрибут name iframe.
двійковий в bcd
приклад:
<h2>Iframe - Target for a Link</h2> <iframe src="new.html" name="iframe_a"></iframe> <p> <a href="https://www.javatpoint.com">JavaTpoint.com</a> </p> <p>The name of iframe and link target must have same value else link will not open as a frame. </p>Перевірте зараз
Вихід
вихідний код new.hmtl:
p{ font-size: 50px; color: red;} <p>This is a link below the ifarme click on link to open new iframe. </p>
Вставте відео YouTube за допомогою iframe
Ви також можете додати відео YouTube на свою веб-сторінку за допомогою
Нижче наведено кілька кроків, щоб додати відео YouTube на вашу веб-сторінку.
- Перейдіть до відео YouTube, яке ви хочете вставити.
- Натисніть «ПОДІЛИТИСЯ» ➦ під відео.
- Натисніть опцію Вставити.
- Скопіюйте HTML-код.
- Вставте код у свій файл HTML
- Змініть висоту, ширину та інші властивості (відповідно до вимог).
приклад:
<iframe src="https://www.youtube.com/embed/JHq3pL4cdy4" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe src="https://www.youtube.com/embed/O5hShUO6wxs" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">></iframe>Перевірте зараз
Вихід:
tostring метод java
Атрибути
Назва атрибута | Значення | опис |
---|---|---|
дозволити повний екран | Якщо значення true, цей кадр можна відкрити на весь екран. | |
висота | Пікселі | Він визначає висоту вбудованого iframe, а висота за замовчуванням становить 150 пікселів. |
назва | текст | Він дає назву iframe. Атрибут name важливий, якщо ви хочете створити посилання в одному кадрі. |
рамка рамки | 1 або 0 | Він визначає, чи має iframe мати рамку чи ні. (Не підтримується в HTML5). |
Ширина | Пікселі | Він визначає ширину вбудованого кадру, а ширина за замовчуванням становить 300 пікселів. |
src | URL | Атрибут src використовується для надання імені шляху або імені файлу, вміст якого буде завантажено в iframe. |
пісочниця | ||
Цей атрибут використовується для застосування додаткових обмежень для вмісту кадру | ||
дозволи-форми | Це дозволяє надсилати форму, якщо це ключове слово не використовується, тоді надсилання форми блокується. | |
дозволити спливаючі вікна | Він увімкне спливаючі вікна, і якщо не застосувати, спливаючі вікна не відкриватимуться. | |
дозволяючі скрипти | Це дозволить запустити сценарій. | |
дозволити те саме походження | Якщо використовується це ключове слово, вбудований ресурс розглядатиметься як завантажений з того самого джерела. | |
srcdoc | Атрибут srcdoc використовується для відображення вмісту HTML у вбудованому iframe. Він замінює атрибут src (якщо браузер підтримує). | |
прокручування | ||
Це вказує на те, чи повинен браузер надавати смугу прокрутки для iframe. (Не підтримується в HTML5) | ||
авто | Смуга прокрутки відображається, лише якщо вміст iframe перевищує його розміри. | |
так | Завжди показує смугу прокрутки для iframe. | |
Немає | Ніколи не показує смугу прокрутки для iframe. |