Cодержание

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

View more Tutorials:

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:
  • TODO Link!
Смотрите так же: использование  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

View more Tutorials: