[html5] r8636 - [e] (0) Adjust examples in <iframe> section to increase diversity
whatwg at whatwg.org
whatwg at whatwg.org
Thu May 15 11:34:00 PDT 2014
Author: ianh
Date: 2014-05-15 11:33:56 -0700 (Thu, 15 May 2014)
New Revision: 8636
Modified:
complete.html
index
source
Log:
[e] (0) Adjust examples in <iframe> section to increase diversity
Modified: complete.html
===================================================================
--- complete.html 2014-05-15 18:22:49 UTC (rev 8635)
+++ complete.html 2014-05-15 18:33:56 UTC (rev 8636)
@@ -23186,13 +23186,21 @@
<div class=example>
<p id=inclusion>An HTML inclusion is effected using this attribute as in the following example.
- In this case, the inclusion is of a site-wide navigation bar.</p>
+ In this case, the inclusion is of a site-wide navigation bar. Any links in the
+ <code><a href=#the-iframe-element>iframe</a></code> will, in new user agents, be automatically opened in the
+ <code><a href=#the-iframe-element>iframe</a></code>'s parent browsing context; for legacy user agents, the site could also
+ include a <code><a href=#the-base-element>base</a></code> element with a <code title=attr-base-target><a href=#attr-base-target>target</a></code>
+ attribute with the value <code title="">_parent</code>. Similarly, in new user agents the styles
+ of the parent page will be automatically applied to the contents of the frame, but to support
+ legacy user agents authors might wish to include the styles explicitly.</p>
<pre><!DOCTYPE HTML>
<title>Mirror Mirror — MovieInfo™</title>
<header>
- <h1>Mirror Mirror</h1>
- <p>Part of the MovieInfo™ Database</p>
+ <hgroup>
+ <h1>Mirror Mirror</h1>
+ <h2>Part of the MovieInfo™ Database</h2>
+ </hgroup>
<nav>
<strong><iframe seamless src="nav.inc"></iframe></strong>
</nav>
@@ -23316,20 +23324,6 @@
<p class=note>The attribute can be set or removed dynamically, with the rendering updating in
tandem.</p>
- <div class=example>
-
- <p>In this example, the site's navigation is embedded using a client-side include using an
- <code><a href=#the-iframe-element>iframe</a></code>. Any links in the <code><a href=#the-iframe-element>iframe</a></code> will, in new user agents, be
- automatically opened in the <code><a href=#the-iframe-element>iframe</a></code>'s parent browsing context; for legacy user
- agents, the site could also include a <code><a href=#the-base-element>base</a></code> element with a <code title=attr-base-target><a href=#attr-base-target>target</a></code> attribute with the value <code title="">_parent</code>.
- Similarly, in new user agents the styles of the parent page will be automatically applied to the
- contents of the frame, but to support legacy user agents authors might wish to include the styles
- explicitly.</p>
-
- <pre><nav><iframe seamless src="nav.include.html"></iframe></nav></pre>
-
- </div>
-
<p class=note>The <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute does not
propagate into <code title=attr-iframe-seamless><a href=#attr-iframe-seamless>seamless</a></code> <code><a href=#the-iframe-element>iframe</a></code>s.</p>
@@ -23339,7 +23333,25 @@
the <code><a href=#the-iframe-element>iframe</a></code> element's <a href=#browsing-context>browsing context</a> are to be allowed to use <code title=dom-element-requestFullscreen><a href=#dom-element-requestfullscreen>requestFullscreen()</a></code> (if it's not blocked for other
reasons, e.g. there is another ancestor <code><a href=#the-iframe-element>iframe</a></code> without this attribute set).</p>
+ <div class=example>
+ <p>Here, an <code><a href=#the-iframe-element>iframe</a></code> is used to embed a player from a video site. The <code title=attr-iframe-allowfullscreen><a href=#attr-iframe-allowfullscreen>allowfullscreen</a></code> attribute is needed to enable the
+ player to show its video full-screen.</p>
+
+ <pre><article>
+ <header>
+ <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
+ <p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Private Post</a></p>
+ </header>
+ <main>
+ <p>Check out my new ride!</p>
+ <strong><iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe></strong>
+ </main>
+</article></pre>
+
+ </div>
+
+
<hr><!-- DIM ATTRIBUTES --><p>The <code><a href=#the-iframe-element>iframe</a></code> element supports <a href=#dimension-attributes>dimension attributes</a> for cases where the
embedded content has specific dimensions (e.g. ad units have well-defined dimensions).</p>
Modified: index
===================================================================
--- index 2014-05-15 18:22:49 UTC (rev 8635)
+++ index 2014-05-15 18:33:56 UTC (rev 8636)
@@ -23186,13 +23186,21 @@
<div class=example>
<p id=inclusion>An HTML inclusion is effected using this attribute as in the following example.
- In this case, the inclusion is of a site-wide navigation bar.</p>
+ In this case, the inclusion is of a site-wide navigation bar. Any links in the
+ <code><a href=#the-iframe-element>iframe</a></code> will, in new user agents, be automatically opened in the
+ <code><a href=#the-iframe-element>iframe</a></code>'s parent browsing context; for legacy user agents, the site could also
+ include a <code><a href=#the-base-element>base</a></code> element with a <code title=attr-base-target><a href=#attr-base-target>target</a></code>
+ attribute with the value <code title="">_parent</code>. Similarly, in new user agents the styles
+ of the parent page will be automatically applied to the contents of the frame, but to support
+ legacy user agents authors might wish to include the styles explicitly.</p>
<pre><!DOCTYPE HTML>
<title>Mirror Mirror — MovieInfo™</title>
<header>
- <h1>Mirror Mirror</h1>
- <p>Part of the MovieInfo™ Database</p>
+ <hgroup>
+ <h1>Mirror Mirror</h1>
+ <h2>Part of the MovieInfo™ Database</h2>
+ </hgroup>
<nav>
<strong><iframe seamless src="nav.inc"></iframe></strong>
</nav>
@@ -23316,20 +23324,6 @@
<p class=note>The attribute can be set or removed dynamically, with the rendering updating in
tandem.</p>
- <div class=example>
-
- <p>In this example, the site's navigation is embedded using a client-side include using an
- <code><a href=#the-iframe-element>iframe</a></code>. Any links in the <code><a href=#the-iframe-element>iframe</a></code> will, in new user agents, be
- automatically opened in the <code><a href=#the-iframe-element>iframe</a></code>'s parent browsing context; for legacy user
- agents, the site could also include a <code><a href=#the-base-element>base</a></code> element with a <code title=attr-base-target><a href=#attr-base-target>target</a></code> attribute with the value <code title="">_parent</code>.
- Similarly, in new user agents the styles of the parent page will be automatically applied to the
- contents of the frame, but to support legacy user agents authors might wish to include the styles
- explicitly.</p>
-
- <pre><nav><iframe seamless src="nav.include.html"></iframe></nav></pre>
-
- </div>
-
<p class=note>The <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute does not
propagate into <code title=attr-iframe-seamless><a href=#attr-iframe-seamless>seamless</a></code> <code><a href=#the-iframe-element>iframe</a></code>s.</p>
@@ -23339,7 +23333,25 @@
the <code><a href=#the-iframe-element>iframe</a></code> element's <a href=#browsing-context>browsing context</a> are to be allowed to use <code title=dom-element-requestFullscreen><a href=#dom-element-requestfullscreen>requestFullscreen()</a></code> (if it's not blocked for other
reasons, e.g. there is another ancestor <code><a href=#the-iframe-element>iframe</a></code> without this attribute set).</p>
+ <div class=example>
+ <p>Here, an <code><a href=#the-iframe-element>iframe</a></code> is used to embed a player from a video site. The <code title=attr-iframe-allowfullscreen><a href=#attr-iframe-allowfullscreen>allowfullscreen</a></code> attribute is needed to enable the
+ player to show its video full-screen.</p>
+
+ <pre><article>
+ <header>
+ <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
+ <p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Private Post</a></p>
+ </header>
+ <main>
+ <p>Check out my new ride!</p>
+ <strong><iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe></strong>
+ </main>
+</article></pre>
+
+ </div>
+
+
<hr><!-- DIM ATTRIBUTES --><p>The <code><a href=#the-iframe-element>iframe</a></code> element supports <a href=#dimension-attributes>dimension attributes</a> for cases where the
embedded content has specific dimensions (e.g. ad units have well-defined dimensions).</p>
Modified: source
===================================================================
--- source 2014-05-15 18:22:49 UTC (rev 8635)
+++ source 2014-05-15 18:33:56 UTC (rev 8636)
@@ -23225,13 +23225,21 @@
<div class="example">
<p id="inclusion">An HTML inclusion is effected using this attribute as in the following example.
- In this case, the inclusion is of a site-wide navigation bar.</p>
+ In this case, the inclusion is of a site-wide navigation bar. Any links in the
+ <code>iframe</code> will, in new user agents, be automatically opened in the
+ <code>iframe</code>'s parent browsing context; for legacy user agents, the site could also
+ include a <code>base</code> element with a <code data-x="attr-base-target">target</code>
+ attribute with the value <code data-x="">_parent</code>. Similarly, in new user agents the styles
+ of the parent page will be automatically applied to the contents of the frame, but to support
+ legacy user agents authors might wish to include the styles explicitly.</p>
<pre><!DOCTYPE HTML>
<title>Mirror Mirror — MovieInfo™</title>
<header>
- <h1>Mirror Mirror</h1>
- <p>Part of the MovieInfo™ Database</p>
+ <hgroup>
+ <h1>Mirror Mirror</h1>
+ <h2>Part of the MovieInfo™ Database</h2>
+ </hgroup>
<nav>
<strong><iframe seamless src="nav.inc"></iframe></strong>
</nav>
@@ -23368,21 +23376,6 @@
<p class="note">The attribute can be set or removed dynamically, with the rendering updating in
tandem.</p>
- <div class="example">
-
- <p>In this example, the site's navigation is embedded using a client-side include using an
- <code>iframe</code>. Any links in the <code>iframe</code> will, in new user agents, be
- automatically opened in the <code>iframe</code>'s parent browsing context; for legacy user
- agents, the site could also include a <code>base</code> element with a <code
- data-x="attr-base-target">target</code> attribute with the value <code data-x="">_parent</code>.
- Similarly, in new user agents the styles of the parent page will be automatically applied to the
- contents of the frame, but to support legacy user agents authors might wish to include the styles
- explicitly.</p>
-
- <pre><nav><iframe seamless src="nav.include.html"></iframe></nav></pre>
-
- </div>
-
<p class="note">The <code data-x="attr-contenteditable">contenteditable</code> attribute does not
propagate into <code data-x="attr-iframe-seamless">seamless</code> <code>iframe</code>s.</p>
@@ -23395,7 +23388,26 @@
data-x="dom-element-requestFullscreen">requestFullscreen()</code> (if it's not blocked for other
reasons, e.g. there is another ancestor <code>iframe</code> without this attribute set).</p>
+ <div class="example">
+ <p>Here, an <code>iframe</code> is used to embed a player from a video site. The <code
+ data-x="attr-iframe-allowfullscreen">allowfullscreen</code> attribute is needed to enable the
+ player to show its video full-screen.</p>
+
+ <pre><article>
+ <header>
+ <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
+ <p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Private Post</a></p>
+ </header>
+ <main>
+ <p>Check out my new ride!</p>
+ <strong><iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe></strong>
+ </main>
+</article></pre>
+
+ </div>
+
+
<hr> <!-- DIM ATTRIBUTES -->
<p>The <code>iframe</code> element supports <span>dimension attributes</span> for cases where the
More information about the Commit-Watchers
mailing list