Edit

Page

Page title:

Page body:

[9] [[HTML]] の [DFN[[CODE(HTMLe)[frame]] 要素]]は、
[RUBY[[[枠]]] [フレーム] [frame]]の内容と見た目を定義します。

* 代替

[5] 現在では [CODE(HTMLe)@en[iframe]] [[要素]]を使うのが普通です。

* 仕様書

[REFS[
- [51] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-05-06 10:42:35 +09:00]] 版) <https://html.spec.whatwg.org/#active-frame-element>
]REFS]

[12]
:[[開始タグ]]:必須
:[[終了タグ]]:禁止 (HTML 4), 必須 (XHTML 1)
:出現できる文脈:[CODE(HTMLe)[[[frameset]]]] の子供として任意個
:[[内容模型]]:空 ([[強制空要素]])
:[[属性]]:
,属性名	,属性値	,既定値	,説明	,状態	,出典
,[CODE(HTMLa)@en[[[allowcrossdomainxhr]]]],,,非標準,[[Air]]
,[CODE(HTMLa)@en[[[application]]]],[CODE(HTML)@en[[[on]]]] | [CODE(HTMLe)@en[[[off]]]],,,非標準,[[HTA]]
,[CODE(HTMLa)[[[bordercolor]]]]	,[CODE(SGML)[%[[Color]]]]	,	,境界線色	,非標準
,[CODE(HTMLa)[[[class]]]]	,	,(なし)	,級	,[HTML 4] [CODE(SGML)[%[[coreattrs]]]]
,[CODE(HTMLa)[[[datafld]]]]	,	,	,データ欄	,非標準
,[CODE(HTMLa)[[[datasrc]]]]	,[CODE(SGML)[%[[URI]]]]	,(なし)	,データ源	,非標準
,[CODE(HTMLa)@en[[[documentroot]]]],,,非標準,[[Air]]
,[CODE(HTMLa)[[[frameborder]]]]	,[CODE(SGML)[[CODE(HTML)[1]] | [CODE(HTML)[0]]]]	,[CODE(HTML)[1]]	,枠境界線	,[HTML 4] 枠
,[CODE(HTMLa)[[[framespacing]]]]	,	,	,枠間隔	,非標準
,[CODE(HTMLa)[[[id]]]]	,[CODE(SGML)[[[ID]]]]	,(なし)	,固有識別子	,[HTML 4] [CODE(SGML)[%[[coreattrs]]]]
,[CODE(HTMLa)[[[longdesc]]]]	,[CODE(SGML)[%[[URI]]]]	,(なし)	,長い説明の参照	,[HTML 4] 枠
,[CODE(HTMLa)[[[marginheight]]]]	,[CODE(SGML)[%[[Pixels]]]]	,	,余白高さ	,[HTML 4] 枠
,[CODE(HTMLa)[[[marginwidth]]]]	,[CODE(SGML)[%[[Pixels]]]]	,	,余白幅	,[HTML 4] 枠
,[CODE(HTMLa)[[[name]]]]	,	,(なし)	,枠名	,[HTML 4] 枠
,[CODE(HTMLa)[[[noresize]]]]	,([[真偽値属性]])	,([[偽]])	,寸法可変性	,[HTML 4] 枠
,[CODE(HTMLa)@en[[[ondominitialize]]]],,,非標準,[[Air]]
,[CODE(HTMLa)@en[[[sandboxroot]]]],,,非標準,[[Air]]
,[CODE(HTMLa)[[[scrolling]]]]	,	,[CODE(HTML)[[[auto]]]]	,	,[HTML 4] 枠
,[CODE(HTMLa)[[[security]]]],,,安全上の扱い,非標準,[[WinIE]]
,[CODE(HTMLa)[[[src]]]]	,[CODE(SGML)[%[[URI]]]]	,(なし)	,枠内容	,[HTML 4] 枠
,[CODE(HTMLa)[[[style]]]]	,	,(なし)	,スタイル指定	,[HTML 4] [CODE(SGML)[%[[coreattrs]]]]
,[CODE(HTMLa)[[[title]]]]	,[CODE(SGML)[%[[Text]]]]	,(なし)	,注釈的題	,[HTML 4] [CODE(SGML)[%[[coreattrs]]]]
,[CODE(XMLa)[[[xmlns]]]]	,[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] 固定	,==	,W3C 勧告	,[[XHTML m12n]]

** フレーム内容

[14] フレームの内容を直接画像とすることは望ましくありません。
(非視覚 UA 向けに) 画像の説明を記述できなくなってしまうからです。 
[SRC[HTML 4 16.4.2]]

例えば、
[PRE(HTML)[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A poorly-designed frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
   <FRAME src="table_of_contents.html">
   <FRAME src="ostrich.gif" longdesc="ostrich-desc.html">
</FRAMESET>
</HTML>
]PRE]

のような場合、確かに [CODE(HTMLa)[[[longdesc]]]]
属性を使うことはできますが、 [CODE(HTMLa)[longdesc]]
は本来フレームの初期内容ではなくフレーム自体を説明するべきものです。

リンクによって他の画像に替えられると、その画像の説明はなくなってしまいます。

[15] という HTML 4 仕様書にある >>14 の考え方は適当ではないと言う人もいます。
曰く、画像が非視覚 UA で表示できないのは代替文を埋め込めない画像形式や画像を表示できない
UA の限界で、ありとあらゆる状況で内容を得ることができるようにするのは無理なことです。

また、フレームを使わない場合でも [CODE(HTMLe)[a]]
を使って画像にリンクすることがありますが、
それも好ましくないと言うのでなければ一貫しません。
そのようなリンクを行うときには、必要で可能であればリンク元に画像の説明があるはずです。
フレーム内であってもそれは同じことでしょう。

また、あるフレームに表示される画像が有限なら、
[CODE(HTMLa)[longdesc]] 文書にすべての代替文を記述しておくのも一つの方法です。

[16]
HTML 4 仕様書は、
回避策として画像を埋め込んだだけのダミー文書を用意することを勧めていますけど、
無駄なだけですよね。

* 状態

[22] [[要素]]、[[閲覧文脈包含子]]としての状態を持ちます。

[3] [[文書中]]にある [CODE(HTMLe)@en[[[frame]]]] [[要素]]を、
[DFN[[RUBYB[活性[CODE(HTMLe)@en[frame]]要素]@en[active [CODE(HTMLe)@en[frame]] element]]]]といいます [SRC[>>51]]。

* 処理

[8] [[著者]]は [CODE(HTMLe)@en[frame]] [[要素]]を使ってはなりませんが、
[[利用者エージェント]]は [CODE(HTMLe)@en[frame]]
[[要素]]を実装しなければなりません。

[2] [[フレーム]]を参照。

[65] [CODE(HTMLe)@en[[[frame]]]] [[要素]][VAR[要素]]の[VAR[属性]]に関する[[属性変更手順群]]は、[VAR[新しい値]]を次のようにしなければ[MUST[なりません]] [SRC[>>51]]。
[FIG(steps)[
= [24] [VAR[要素]]の[F[入れ子閲覧文脈]]が [CODE[null]] 以外なら、
== [25] [VAR[属性]]が [CODE(HTMLa)@en[[[src]]]] [[属性]]なら、
=== [26] [VAR[要素]]について[[[CODE(HTMLe)@en[frame]]属性の処理]]を行います。
== [27] [VAR[属性]]が [CODE(HTMLa)@en[name][閲覧文脈名]] [[属性]]なら、
=== [28] [VAR[要素]]の[F[入れ子閲覧文脈]]の[F[閲覧文脈名]]を、
[VAR[新しい値]]が [CODE[null]] なら[[空文字列]]、それ以外なら[VAR[新しい値]]に設定します。
]FIG]

* [CODE(DOMi)@en[HTMLFrameElement]] インターフェイス

[6] [CODE(HTMLe)@en[frame]] [[要素]]の[[要素インターフェイス]]は、
[CODE(DOMi)@en[HTMLFrameElement]] [[インターフェイス]]です。

[7] [CODE(DOMi)@en[HTMLFrameElement]] [[インターフェイス]]には、
次のメンバーがあります。
[FIG(list short)[
- [CODE(DOMa)@en[contentDocument]]
- [CODE(DOMa)@en[contentWindow]]
]FIG]

* 歴史

[4] [[Netscape Navigator 2.0]] で導入されました。

** HTML4

[REFS[
- [10] [[HTML 4]]
-- [CITE[16.2.2 The [CODE(HTMLe)[FRAME]] element]] 
<IW:HTML4:"present/frames.html#edef-FRAME">
-- [CITE[16.4.2 Long descriptions of frames]]
<IW:HTML4:"present/frames.html#idx-accessibility-1">
]REFS]

[19] [CITE@en-US[Internet Explorer Linked Pages Are Being Cached in Frame Set]]
( ([TIME[2013-11-05 09:10:47 +09:00]] 版))
<http://support.microsoft.com/kb/233528/en-us>

[20] [CITE[IE5のお気に入りにクリビツ!]]
( ([TIME[2007-12-08 03:32:18 +09:00]] 版))
<http://www.tohoho-web.com/lng/199904/99040069.htm>

** [CODE(XMLe)@en[frame]] 要素 (XFrames)

[17] [CITE@en[XFrames]] ([TIME[2010-12-17 00:45:08 +09:00]] 版) <http://www.w3.org/TR/2010/NOTE-xframes-20101216/#s_frame-element>

[18] [[HTML]] とは違って、 [[URL]] は [CODE(HTMLa)@en[[[src]]]] [[属性]]ではなく、
[CODE(XMLa)@en[[[source]]]] [[属性]]に指定します。

** HTML5

[21] [CITE@en[Web Applications 1.0 r8380     Update <frame> requirements to match legacy better]]
( ([TIME[2014-01-07 08:46:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8379&to=8380>

* 他との関係

[11] HTML には、特定実装の拡張で、同名別用法の
[CODE(HTMLe)[frame]] 要素型が存在します (>>8)。

[[#comment]]

** 例

[13] フレームの見た目を指定した例 [SRC[HTML 4 16.2.2.2]]
[PRE(HTML)[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
  <FRAMESET rows="*,200">
      <FRAME src="contents_of_frame1.html" scrolling="no">
      <FRAME src="contents_of_frame2.gif" 
                marginwidth="10" marginheight="15"
                noresize>
  </FRAMESET>
  <FRAME src="contents_of_frame3.html" frameborder="0">
  <FRAME src="contents_of_frame4.html" frameborder="0">
</FRAMESET>
</HTML>
]PRE]

この例では、フレーム1は scroll できなくなります。
フレーム2は画像の周りに余白が付きますし、
大きさを変えることができなくなります。

フレーム3とフレーム4の間には境界線をつけません。
フレーム1とフレーム2とフレーム3の間の境界線は付きます。
(フレーム2とフレーム3の間に境界線が引かれることに注意。)

[23] [CITE@en[Be more precise about nested and discarded browsing contexts]]
([[domenic]]著, [TIME[2016-07-20 22:58:49 +09:00]])
<https://github.com/whatwg/html/commit/39118df640ad4a3f03f164fb5ffe0a56316297be>

[29] [CITE@en[Editorial: Cross-reference DOM "child" where appropriate in rendering]]
([[zcorpan]]著, [TIME[2016-09-20 20:16:41 +09:00]])
<https://github.com/whatwg/html/commit/e8c91c05edc8d6cdb33fdd5452e052359d40490b>

[30] [CITE@en[Make <frame> fire load synchronously with "completely loaded"]]
([[annevk]]著, [TIME[2018-02-22 20:11:33 +09:00]])
<https://github.com/whatwg/html/commit/16de123059bd4b3660677fb4fdc03e2053815482>

[31] [CITE@en[frame and iframe have different load-event-firing behaviors · Issue #3492 · whatwg/html]]
([TIME[2018-02-24 19:33:32 +09:00]])
<https://github.com/whatwg/html/issues/3492>

[32] [CITE@en[Make <frame> fire load synchronously with "completely loaded" by annevk · Pull Request #3495 · whatwg/html]]
([TIME[2018-02-24 19:33:52 +09:00]])
<https://github.com/whatwg/html/pull/3495>

[33] [CITE@en[Make the default tabIndex for <frame> 0]]
([[domenic]]著, [TIME[2019-08-23 04:40:17 +09:00]])
<https://github.com/whatwg/html/commit/7952ba43a9a7c2f0295359f8dbe097e5f1bdbfd5>

[34] [CITE@en[The default tab index of frame element should be 0 · Issue #4855 · whatwg/html · GitHub]]
([TIME[2020-07-13 12:32:11 +09:00]])
<https://github.com/whatwg/html/issues/4855>

[35] [CITE@en[Make the default tabIndex for <frame> 0 by domenic · Pull Request #4859 · whatwg/html · GitHub]]
([TIME[2020-07-13 12:32:33 +09:00]])
<https://github.com/whatwg/html/pull/4859>

[36] [CITE@en[Editorial: nested browsing context is a member, not a type]]
([[annevk]], [TIME[2019-11-27 02:46:03 +09:00]], [TIME[2022-01-18T10:08:48.000Z]])
<https://github.com/whatwg/html/commit/6b737bbc428facf34ec3728c0912cf9e172d0ea4>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)