<iframe>【インラインフレーム (Nested browsing context)】
概要 構文 DOMインタフェース
概要
メモ
例
<iframe width="400" height="100" src="https://cercopes-z.com/index-simple.html">
</iframe>
<iframe width="200" height="100" srcdoc="<!DOCTYPE html><html><body>iframe内容</body></html>">
</iframe>
CSS (一部)
スタイル | スタイル定義 |
---|---|
ボーダー有無 | border-width【境界線の幅】 |
ボーダー | border【境界線】 |
フレーム内のマージン | padding【パディング (内部間隔)】 |
フレーム外のマージン | margin【マージン (外部間隔)】 |
外部リンク
- HTML Living Standard (英語)
- W3C HTML 5.2 (英語)
- W3C HTML 5.1 2nd Edition (英語)
- W3C HTML5 (英語)
構文
<iframe | 必須 | 開始タグ | ||||||||||||||||||||||||
align=top | middle | bottom | left | right | フレーム表示位置 | |||||||||||||||||||||||||
allow=【機能ポリシー】 | 機能ポリシー | |||||||||||||||||||||||||
allowfullscreen | フルスクリーン表示の許可 (requestFullscreen()の使用許可) | |||||||||||||||||||||||||
allowpaymentrequest | 決済要求の許可 (PaymentRequestインタフェース) | |||||||||||||||||||||||||
allowusermedia | ユーザメディアの使用許可 (getUserMedia()の使用許可) | |||||||||||||||||||||||||
frameborder=1 | 0 | ボーダー有無 代替:スタイルシート(border-width) | |||||||||||||||||||||||||
height=【高さ】 | 高さ | |||||||||||||||||||||||||
longdesc=【詳細説明文へのリンク】 | 詳細説明文へのリンク (title属性の補完) | |||||||||||||||||||||||||
marginheight=【ピクセル数 (0以上)】 | フレーム内の上下マージン 代替:スタイルシート(padding-top・padding-bottom) | |||||||||||||||||||||||||
marginwidth=【ピクセル数 (0以上)】 | フレーム内の左右マージン 代替:スタイルシート(padding-left・padding-right) | |||||||||||||||||||||||||
name=【フレーム名】 | フレーム名 | |||||||||||||||||||||||||
referrerpolicy=【リファラー ポリシー】 | リファラー ポリシー (W3C:Referrer Policy (英語))
| |||||||||||||||||||||||||
sandbox=【セキュリティルール (複数:半角スペース区切り)】 | セキュリティルール
| |||||||||||||||||||||||||
scrolling=auto | yes | no | スクロールバー表示有無 | |||||||||||||||||||||||||
src=【初期表示内容URL】 | リソースのアドレス | |||||||||||||||||||||||||
srcdoc=【表示内容】 | 表示内容 (直接指定) | |||||||||||||||||||||||||
width=【幅】 | 幅 | |||||||||||||||||||||||||
【グローバル属性】 | ||||||||||||||||||||||||||
accesskey=【アクセスキー (複数:半角スペース区切り )】 | アクセスキー | |||||||||||||||||||||||||
autocapitalize=【変換方法】 | 自動大文字化
| |||||||||||||||||||||||||
autofocus | ページロード時、自動フォーカス ※:<button>【ボタン】・<input>【汎用入力コントロール】・<textarea>【複数行入力コントロール】・<select>【選択リスト】はW3C定義の同名個別属性も参照 | |||||||||||||||||||||||||
class=【クラス名 (複数:半角スペース区切り)】 | 所属クラス (複数指定:<style>【スタイル情報】)・外部スタイルシートで後から定義したほうが優先 | |||||||||||||||||||||||||
contenteditable [ ="" (可能) | true (可能) | false (不可) | inherit (親要素継承) ] | 編集可否 | |||||||||||||||||||||||||
contextmenu=<menu>【メニュー】 のid | コンテキストメニューのid | |||||||||||||||||||||||||
data-*=【カスタムデータ】 | カスタムデータ属性 | |||||||||||||||||||||||||
dir=ltr (左から右) | rtl (右から左) | auto (自動) | 文字表記方向 (ltr:left to right text or table / rtl:right to left text or table) ※<bdo>【テキスト方向形式】の場合、ltr または rtlが必須 | |||||||||||||||||||||||||
draggable=true (ドラッグ可能) | false (ドラッグ不可) | auto (ブラウザ既定) | ドラッグ可否 | |||||||||||||||||||||||||
dropzone=copy (ドロップデータのコピー) | move (ドロップデータを移動) | link (ドロップデータのリンク) | ドロップデータの扱い | |||||||||||||||||||||||||
enterkeyhint=【ヒント】 | [Enter]キーのアクション ヒント (対応するラベル・アイコン等を表示)
| |||||||||||||||||||||||||
id=【id】 | id (ドキュメント中で一意 name【コントロール名 (送信データ名)】を含む) スペース文字 (SP:U+0020・tab:U+0009・LF:U+000A・FF:U+000C・CR:U+000D) 以外の全ての文字が使用可能 (大文字小文字の区別あり) (<a>【ハイパーリンク】のリンク先・CSS対象(#~)・スクリプト参照) | |||||||||||||||||||||||||
inputmode=【入力モード】 | 入力モード (参照:CSS ime-mode【IMEモード】) ※:<input>【汎用入力コントロール】・<textarea>【複数行入力コントロール】はW3C定義の同名個別属性も参照
| |||||||||||||||||||||||||
is=【定義名】 | 定義名 | |||||||||||||||||||||||||
itemid=【URL】 | アイテムのグローバル識別子 | |||||||||||||||||||||||||
itemprop=【アイテムのプロパティ (複数:半角スペース区切り)】 | アイテムのプロパティ | |||||||||||||||||||||||||
itemref=【要素IDのリスト】 | アイテムの参照リスト | |||||||||||||||||||||||||
itemscope | アイテムのプロパティ宣言 | |||||||||||||||||||||||||
itemtype=【アイテムの型 (複数:半角スペース区切り)】 | アイテムの型 | |||||||||||||||||||||||||
lang=【言語コード】 | 言語コード (【主コード】-【副コード】 例:"ja":日本語 / "en":英語 / "en-US":アメリカ英語) | |||||||||||||||||||||||||
nonce=【ワンタイム トークン (文字列)】 | CSP(コンテンツ セキュリティ ポリシー)のチェックで使用されるワンタイム トークン(nonce:number used once) ※:<link>【メタデータリンク】・<script>【スクリプト】・<style>【スタイル情報】はW3C定義の同名個別属性も参照 | |||||||||||||||||||||||||
slot=【スロット名】 | スロット名 (<slot>【スロット】のname属性に対応) | |||||||||||||||||||||||||
spellcheck=true | false | スペルチェック有無 | |||||||||||||||||||||||||
style=【スタイルシート (複数:セミコロン区切り / 最後のセミコロンは省略可)】 | スタイル | |||||||||||||||||||||||||
tabindex=【タブインデックス番号】 | タブインデックス | |||||||||||||||||||||||||
title=【説明文】 | 説明 (多くはツールチップ表示) ※<link>【メタデータリンク】:メタデータリンクのタイトル ※<style>【スタイル情報】:スタイルシート名 | |||||||||||||||||||||||||
translate="" (翻訳対象) | yes (翻訳対象) | no (翻訳対象外) | 翻訳可否 | |||||||||||||||||||||||||
> | ||||||||||||||||||||||||||
【未サポート・非表示設定の場合、内容表示】 | ||||||||||||||||||||||||||
</iframe> | 必須 | 終了タグ |
DOMインタフェース (HTMLIFrameElement・HTMLElement)
interface HTMLIFrameElement : HTMLElement { | W3C:interface HTMLIFrameElement (英語) HTML 5.1 ・ HTML 5.2 ・ WHATWG | ||
【プロパティ】 | |||
【HTMLIFrameElement プロパティ】 | |||
allow; | 機能ポリシー | ||
allowFullscreen; | フルスクリーン表示の許可 | ||
allowPaymentRequest; | 決済要求の許可 | ||
allowUserMedia; | ユーザメディアの使用許可 | ||
? | contentDocument; | Document オブジェクト | |
attribute WindowProxy? | contentWindow; | WindowProxy オブジェクト | |
height; | 高さ | ||
name; | フレーム名 | ||
referrerPolicy; | リファラー ポリシー | ||
[SameObject, PutForwards=value] | attribute DOMSettableTokenList | sandbox; | セキュリティルール リスト |
src; | リソースのアドレス | ||
srcdoc; | 表示内容 | ||
width; | 幅 | ||
【HTMLElement プロパティ】 | |||
accessKey; | アクセスキー | ||
accessKeyLabel; | アクセスキー表現文字列 | ||
contentEditable; | 編集可能状態 ("true":編集可能 / "false":編集不可 / "inherit":親要素継承) | ||
Map | dataset; | カスタムデータ属性 (data-*) マップ | |
dir; | 文字表記方向 ("ltr":左から右 / "rtl":右から左) | ||
draggable; | ドラッグ可否 | ||
[PutForwards=value] | attribute DOMTokenList | dropzone; | ドロップデータの扱い |
hidden; | 非表示状態 | ||
[TreatNullAs=EmptyString] | innerText; | 内容 (テキスト形式) | |
isContentEditable; | 編集可否 | ||
lang; | 言語コード | ||
spellcheck; | スペルチェック有無 | ||
attribute long | tabIndex; | タブインデックス | |
title; | 説明 | ||
translate; | 翻訳可否 | ||
【ElementCSSInlineStyle プロパティ】 | |||
attribute CSSStyleDeclaration | style; | スタイル | |
【CSSStyleDeclaration プロパティ】 (仕様上、次と同等: CSSStyleDeclaration implements CSS2Properties) | |||
style.~; | スタイル属性 (例:style.color・style.backgroundColor) | ||
【Element プロパティ】 | |||
[SameObject] | attribute NamedNodeMap | attributes; | 関連属性 マップ |
[SameObject] | attribute DOMTokenList | classList; | クラス名 リスト |
className; | クラス名 | ||
id; | id (ページ内で一意:name【コントロール(送信)名】を含む) | ||
( | innerHTML;) | 内容 (HTML形式) W3C:未定義 (参照:Element.outerHTML・Node.textContent (innerText)) | |
localName; | ローカル名 | ||
? | namespaceURI; | ネームスペースURI | |
( | outerHTML;) | タグを含む内容 (HTML形式) W3C:未定義 (参照:Element.innerHTML・Node.textContent (innerText)) | |
? | prefix; | プリフィックス | |
tagName; | タグ名 | ||
【Node プロパティ】 | |||
? | baseURI; | ベースURI | |
[SameObject] | childNodes; | 子ノード リスト | |
? | firstChild; | 先頭子ノード | |
? | lastChild; | 最終子ノード | |
? | nextSibling; | 次の兄弟ノード | |
nodeName; | ノード名 | ||
attribute unsigned short | nodeType; | ノードタイプ (ELEMENT_NODE / ATTRIBUTE_NODE / TEXT_NODE / CDATA_SECTION_NODE / ENTITY_REFERENCE_NODE / ENTITY_NODE / PROCESSING_INSTRUCTION_NODE / COMMENT_NODE / DOCUMENT_NODE / DOCUMENT_TYPE_NODE / DOCUMENT_FRAGMENT_NODE / NOTATION_NODE) | |
? | nodeValue; | ノード値 | |
? | ownerDocument; | オーナードキュメント | |
? | parentElement; | 親エレメント | |
? | parentNode; | 親ノード | |
? | previousSibling; | 前の兄弟ノード | |
? | textContent; (IE:innerText) | 内容 (Text形式) (参照:Element.innerHTML・Element.outerHTML) 取得:要素内のHTMLタグを除外しテキストのみ 設定:HTMLタグはテキスト変換 | |
【GlobalEventHandlers プロパティ (一部) 】 | |||
attribute EventHandler onabort; | on~; | イベントハンドラ (例:onclick・onfocus) | |
【ParentNode プロパティ】 | |||
attribute unsigned long | childElementCount; | 子エレメントの数 | |
[SameObject] | attribute HTMLCollection | children; | 子エレメント コレクション |
? | firstElementChild; | 最初の子エレメント | |
? | lastElementChild; | 最後の子エレメント | |
【NonDocumentTypeChildNode プロパティ】 | |||
? | previousElementSibling; | 前の兄弟エレメント | |
? | nextElementSibling; | 次の兄弟エレメント | |
【メソッド】 | |||
【HTMLElement メソッド】 | |||
void click(); | クリック 操作 | ||
void focus(); | フォーカス設定 操作 | ||
void forceSpellCheck(); | スペルチェック | ||
void blur(); | フォーカス喪失 操作 | ||
【Element メソッド】 | |||
? getAttribute( name); | 属性取得 | ||
? getAttributeNS(? namespace, localName); | 属性取得 (ネームスペース指定) | ||
HTMLCollection getElementsByClassName( classNames); | エレメント コレクション取得 (クラス名指定) | ||
HTMLCollection getElementsByTagName( localName); | エレメント コレクション取得 (タグ名指定) | ||
HTMLCollection getElementsByTagNameNS(? namespace, localName); | エレメント コレクション取得 (ネームスペース・タグ名指定) | ||
boolean hasAttribute( name); | 属性チェック | ||
boolean hasAttributeNS(? namespace, localName); | 属性チェック (ネームスペース指定) | ||
void removeAttribute( name); | 属性削除 | ||
void removeAttributeNS(? namespace, localName); | 属性削除 (ネームスペース指定) | ||
void setAttribute( name, value); | 属性設定 | ||
void setAttributeNS(? namespace, name, value); | 属性設定 (ネームスペース指定) | ||
【Node メソッド】 | |||
Node appendChild(Node node); | 子ノード追加 | ||
[NewObject] Node cloneNode(optional boolean deep = false); | クローンノード作成 | ||
unsigned short compareDocumentPosition(Node other); | 他ノードとの位置比較 (DOCUMENT_POSITION_DISCONNECTED / DOCUMENT_POSITION_PRECEDING / DOCUMENT_POSITION_FOLLOWING / DOCUMENT_POSITION_CONTAINS / DOCUMENT_POSITION_CONTAINED_BY / DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC) | ||
boolean contains(Node? other); | 指定子孫ノードの存在有無 | ||
boolean hasChildNodes(); | 子ノードの存在有無 | ||
Node insertBefore(Node node, Node? child); | 指定ノード前挿入 | ||
boolean isDefaultNamespace(? namespace); | デフォルトネームスペース チェック | ||
boolean isEqualNode(Node? node); | 同一ノードチェック | ||
? lookupNamespaceURI(? prefix); | ネームスペースURI調査 | ||
? lookupPrefix(? namespace); | ネームスペース プリフィックス調査 | ||
void normalize(); | 標準化 | ||
Node removeChild(Node child); | 子ノード削除 | ||
Node replaceChild(Node node, Node child); | 子ノード置換 | ||
【ParentNode メソッド】 | |||
Element? querySelector( selectors); | 指定セレクタ先頭エレメント取得 | ||
[NewObject] NodeList querySelectorAll( selectors); | 指定セレクタ ノードリスト取得 | ||
【ChildNode メソッド】 | |||
void remove(); | 削除 | ||
}; |