betacode

Руководство HTML IFrame

  1. HTML iframe
  2. width, height
  3. srcdoc
  4. name
  5. sandbox

1. HTML iframe

В HTML, тег <iframe> используется для отображения страницы внутри другой страницы.
Ниже является самый простой синтаксис, чтобы вы создали <iframe>:
<iframe src="URL"></iframe>
Списко атрибутов (attribute) у <iframe>:
Атрибут
(Attribute)
Значение
Описание
src
URL
Определяет адрес документа для встройки в <iframe>.
srcdoc
HTML_code
Определяет содержание HTML страницы для отображения в <iframe>.
name
text
Определяет название <iframe>.
height
pixels
Определяет высоту <iframe>. Значение по-молчанию 150 pixel.
width
pixels
Определяет ширину <iframe>. Значение по-молчанию 300 pixel.
sandbox
allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
Позволяет настроить некоторые ограничения (restrictions) для содержимого в <iframe>.
Примечание: Имеются некоторые другие HTML4.1 <iframe> но больше не поддерживаются в HTML5, они включают: align, frameborder, longdesc, marginheight, marginwidth, scrolling.
Тег <iframe> так же поддерживает стандартные атрибуты в HTML:
  • HTML Global Attributes
Смотрите так же: использование Javascript для работы с системой иерархии Frame:

2. width, height

Атрибуты width, height помогают вам настроить ширину, высоту по единице pixel для <iframe>, значение по-умолчанию у (width,height) = (300px,150px).
width-height-example.html
<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
</head> 
<body>
  <h3>iframe - width/height:</h3>

  <iframe src='child.html'
      width= 300 height = 100
      style="border:1px solid black"></iframe>
</body>
</html>
Вы так же можете использовать CSS для настройки ширины и высоты для <iframe>:
css-width-height-example.html
<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>iframe - width/height:</h3>
  <iframe src='child.html'
      style="width:300px;height:100px;border:1px solid black"></iframe>
</body>
</html>
vw, vh
В CSS, единица vw является аббревитурой Viewport Width, и vh аббревиатурой Viewport Height.
  • 20vw = 20% Viewport Width
  • 100vw = 100% Viewport Width
  • 20vh = 20% Viewport Height
  • 100vh = 100% Viewport Height
  • ...
Пример ниже использует CSS для создания ширины 100%, высоты 100% для <iframe>:
width-height-100-vw-vh.html
<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>iframe:</h3>
  <p>style={width:100vw; height:100vh}</p>
  <iframe src='child.html'
      style="border:1px solid black;width:100%;height:100vh;"></iframe>
  <br/>
</body>
</html>
Помимо этого имеются 2 других подхода для того, чтобы вы смогли настроить ширину 100% и высоту 100% для <iframe>:
iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
Или:
html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}

3. srcdoc

Атрибут srcdoc отпределяет содержание HTML для отображения <iframe>.
srcdoc-example.html
<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
  <script>
     function setNewContentForIframe() {
        var div = document.getElementById("mydiv");
        document.getElementById("myframe").srcdoc = div.innerHTML;
     }
  </script>
</head>
<body>
  <h3>iframe - srcdoc:</h3>

  <iframe srcdoc="<h3>This is an iframe</h3>" id ="myframe"
      height ="100"
      style="border:1px solid black"></iframe>
  <p>Div</p>
  <div style="background: #e5e7e9;padding:5px;" id="mydiv">
      <h4>Content in a div</h4>
      Content in a div
  </div>
  <br/>
  <button onClick="setNewContentForIframe()">Set new Content for Iframe</button>
  <a href="">Reset</a>
</body>
</html>

4. name

Название <iframe> может быть использовано как target (цель) для тега <a>:
name-example.html
<!DOCTYPE html>
<html>
<head>
  <title>iframe name</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>iframe - name:</h3>
  <a href="child.html" target="myframe">Open Link in 'myframe'</a>
  <br/><br/>
  <iframe src=''
         style="border:1px solid black" name="myframe"></iframe>
  <br/>
  <a href="">Reset</a>
</body>
</html>

5. sandbox

Атрибут sandbox используется для применения дополнительных ограничений (restriction) для <iframe>.
Атрибут sandbox может принять один из значений ниже, или много значений отделенных пробелом. Если значение у sandbox является пустым, значит все органичения будут применены.
allow-forms
Позволяет FORM в <iframe> быть submit (отправленным). Если вы используете атрибут sandbox для <iframe> но его значение не имеет ключевое слово "allow-forms", это значит действие submit у FORM в <iframe> будет отключено.
allow-modals
Разрешает функциям alert(), confirm(), prompt() работать в <iframe>.
allow-popups
Ключевое слово allow-popups позволяет <iframe> открыть новое окно, например разрешение использовать window.open(), showModalDialog(), и <a target="_blank">. Если <iframe> имеет атрибут sandbox но его значение не включает ключевого слова allow-popups значит вы не можете открыть новое окно из данного <iframe>.
allow-scripts
Разрешает <iframe> запускать Script, но нельзя создавать новые окна popup.
allow-top-navigation
Разрешает <iframe> перемещать "содержание браузера" (browsing context) на самом верхнем уровне (top-level). Это значит в <iframe> вы можете использовать <a target="_top">, или window.open(URL,"_top"), ...
allow-top-navigation-by-user-activation
Разрешает <iframe> перемещать "содержание браузера" (browsing context) на самом верхнем уровне (top-level), но это перемещение должно исходить от действия пользователя.
allow-same-origin
Если <iframe> имеет атрибут sandbox но не включает значение allow-same-origin, то URL у <iframe> обрабатывается как исходящий из определенного места и не соответствует правилам одного источника. (same-origin policy).
allow-pointer-lock
Ключевое слово allow-pointer-lock разрешает <iframe> использовать Pointer Lock API.
Pointer Lock API позволяет блокировать (lock) курсор в одном регионе, он гарантирует мониторинг действия курсора в этом регионе, даже если курсор выходит за рамки данного региона. Данный API полезен в играх 3D работающих на браузере, пользователь все так же может контролировать игру, даже когда курсор выходит за регион игрового поля.
allow-orientation-lock
allow-popups-to-escape-sandbox
allow-presentation

Pуководства HTML

Show More

Новейшие статьи

Show More