スクリプトは著者が文書に双方向性を追加することを許可する。
著者は、宣言型のメカニズムがしばしばより保守しやすく、かつ多くのユーザーがスクリプトを無効としているため、可能であれば、スクリプトに宣言型の代替を使用するよう推奨される。
たとえば、より詳細な情報を表示するセクションを表示または非表示にするスクリプトを使用する代わりに、details
要素を使用できる。
著者はまた、スクリプトのサポートがない状態でそれらのアプリケーションが行儀よくデグレードするよう推奨される。
たとえば、著者がテーブルヘッダーにおいてリンクに動的なテーブルの再ソートを提供する場合、リンクはまたサーバーからソートされたテーブルを要求することによって、スクリプトなしで機能させることができるかもしれない。
script
要素src
属性が存在しない場合、type
属性の値に依存するが、スクリプトの内容制限に一致しなければならない。src
属性が存在する場合、要素は空またはスクリプト文書を含むだけでなくスクリプトの内容制限に一致するかのいずれかでなければならない。src
- リソースのアドレスtype
— 埋め込みリソースタイプcharset
- 外部スクリプトリソースの文字エンコーディングasync
- 非同期的にスクリプトを実行するdefer
- スクリプトの実行を延期するcrossorigin
— 要素がcrossorigin要求を処理する方法interface HTMLScriptElement : HTMLElement { attribute DOMString src; attribute DOMString type; attribute DOMString charset; attribute boolean async; attribute boolean defer; attribute DOMString crossOrigin; attribute DOMString text; };
script
要素は、著者が文書に動的スクリプトおよびデータブロックを含むことを許可する。この要素は、ユーザーにコンテンツを表すものでない。
動的なスクリプトを含めるために使用される場合、スクリプトはインラインに埋め込むか、src
属性を用いて外部ファイルからインポートすることのいずれかができる。言語が"text/javascript
"によって記述されない場合、後述するようにtype
属性は存在しなければならない。どのような言語を使用してもscript
要素の内容は、その言語の仕様の要求を遵守しなければならない。
(スクリプトとは対照的に)データブロックを含むために使用される場合、データはインラインで埋め込まれなければならず、データのフォーマットはtype
属性を使用して指定されなければならず、src
属性を指定してはならず、script
要素の内容は使用されるフォーマットのために定義された要件に準拠しなければならない。
type
属性は、スクリプトの言語またはデータの形式を提供する。属性が存在する場合、その値は妥当なMIMEタイプでなければならない。charset
パラメータを指定してはならない。属性が存在しない場合に使用されるデフォルトは、"text/javascript
"である。
指定される場合、src
属性は使用する外部スクリプトのリソースのアドレスを渡す。属性が存在する場合、属性値は、type
属性によって与えられる型に属するスクリプトリソースを識別する潜在的に空白で囲まれた妥当な空でないURLでなければならず、属性が存在しない場合、"text/javascript
"型でなければならない。スクリプト言語を識別し、かつリソースがその言語の仕様の要求に適合する場合、リソースは、指定される型のスクリプトリソースである。
charset
属性は、外部スクリプトリソースの文字エンコーディングを与える。src
属性が存在しない場合、この属性は指定されてはならない。属性が設定される場合、その値はエンコーディングのラベルとASCII大文字・小文字不区別で一致しなければならず、かつもしあれば、外部ファイルのContent-Typeメタデータのcharset
パラメータと同じエンコーディングを指定しなければならない。[ENCODING]
async
およびdefer
属性は、どのようにスクリプトを実行すべきかを指示する真偽属性である。src
属性が存在しない場合、defer
およびasync
属性は指定されてはならない。
これらの属性を使用して選択することができる3つの考えられるモードが存在する。async
属性が存在する場合、利用可能になるとすぐに、スクリプトは非同期的に実行されるだろう。async
が存在しないもののdefer
属性が存在する場合、ページが解析完了する際にスクリプトは実行される。どちらの属性も存在しない場合、ユーザーエージェントがページの解析を続ける前に、スクリプトは直ちにフェッチされて実行される。
これら属性の正確な処理の詳細は、主に歴史的な理由から、いくぶん自明でない、多くのHTMLの側面を含む。したがって、実装要求は必然的に仕様のあらゆる場所に散在している。(この節の)下記のアルゴリズムは、この処理の中核を説明するが、これらのアルゴリズムが参照する、およびHTMLにおけるscript
の開始タグと終了タグに対する構文解析規則、無関係なコンテンツで、XMLで、document.write()
メソッドに対する規則、スクリプトの取り扱いなどによって参照される。
たとえasync
属性が指定されても、デフォルトである同期ブロッキング動作の代わりにdefer
の動作をフォールバックするために、defer
のみをサポートする(かつasync
をサポートしない)レガシーウェブブラウザをもたらすため、defer
属性は指定されてもよい。
crossorigin
属性はCORS設定属性である。他の生成元から取得されたスクリプトに対して、エラー情報を公開するかどうかを制御する。
src
、type
、charset
、async
、defer
、およびcrossorigin
属性の動的な変更は直接何も影響しない。これらの属性は下記に説明する特定時に使用される。
A script
element has several associated pieces of state.
The first is a flag indicating whether or not the script block has been "already
started". Initially, script
elements must have this flag unset (script blocks,
when created, are not "already started"). The cloning
steps for script
elements must set the "already started" flag on the copy if
it is set on the element being cloned.
The second is a flag indicating whether the element was "parser-inserted".
Initially, script
elements must have this flag unset. It is set by the HTML
parser and the XML parser on script
elements they insert and
affects the processing of those elements.
The third is a flag indicating whether the element will "force-async". Initially,
script
elements must have this flag set. It is unset by the HTML parser
and the XML parser on script
elements they insert. In addition, whenever
a script
element whose "force-async" flag is set has a async
content attribute added, the element's
"force-async" flag must be unset.
The fourth is a flag indicating whether or not the script block is "ready to be
parser-executed". Initially, script
elements must have this flag unset (script
blocks, when created, are not "ready to be parser-executed"). This flag is used only for elements
that are also "parser-inserted", to let the parser know when to execute the
script.
The last few pieces of state are the script block's type, the
script block's character encoding, and the script block's fallback character
encoding. They are determined when the script is prepared, based on the attributes on
the element at that time, and the Document
of the script
element.
When a script
element that is not marked as being "parser-inserted"
experiences one of the events listed in the following list, the user agent must synchronously
prepare the script
element:
script
element gets inserted
into a document, at the time the node is inserted
according to the DOM, after any other script
elements inserted at the same time that
are earlier in the Document
in tree order.script
element is in a Document
and a node or
document fragment is inserted into the
script
element, after any script
elements inserted at that time.script
element is in a Document
and has a src
attribute set where previously the element had no such
attribute.To prepare a script, the user agent must act as follows:
If the script
element is marked as having "already started", then
the user agent must abort these steps at this point. The script is not executed.
If the element has its "parser-inserted" flag set, then set was-parser-inserted to true and unset the element's "parser-inserted" flag. Otherwise, set was-parser-inserted to false.
This is done so that if parser-inserted script
elements fail to run
when the parser tries to run them, e.g. because they are empty or specify an unsupported
scripting language, another script can later mutate them and cause them to run again.
If was-parser-inserted is true and the element does not have an async
attribute, then set the element's
"force-async" flag to true.
This is done so that if a parser-inserted script
element fails to
run when the parser tries to run it, but it is later executed after a script dynamically updates
it, it will execute asynchronously even if the async
attribute isn't set.
If the element has no src
attribute, and its child
nodes, if any, consist only of comment nodes and empty Text
nodes, then the user
agent must abort these steps at this point. The script is not executed.
If the element is not in a Document
, then the user agent must abort
these steps at this point. The script is not executed.
If either:
script
element has a type
attribute
and its value is the empty string, orscript
element has no type
attribute
but it has a language
attribute and that
attribute's value is the empty string, orscript
element has neither a type
attribute nor a language
attribute, then...let the script block's type for this script
element be "text/javascript
".
Otherwise, if the script
element has a type
attribute, let the script block's type for this
script
element be the value of that attribute with any leading or trailing
sequences of space characters removed.
Otherwise, the element has a non-empty language
attribute; let the script block's type for this script
element be the
concatenation of the string "text/
" followed by the value of the language
attribute.
The language
attribute is never
conforming, and is always ignored if there is a type
attribute present.
If the user agent does not support the scripting language given by the
script block's type for this script
element, then the user agent must abort
these steps at this point. The script is not executed.
If was-parser-inserted is true, then flag the element as "parser-inserted" again, and set the element's "force-async" flag to false.
The user agent must set the element's "already started" flag.
The state of the element at this moment is later used to determine the script source.
If the element is flagged as "parser-inserted", but the element's
Document
is not the Document
of the parser that created the element,
then abort these steps.
If scripting is disabled for the script
element, then the user agent must abort these steps at this point. The script is not
executed.
The definition of scripting is disabled
means that, amongst others, the following scripts will not execute: scripts in
XMLHttpRequest
's responseXML
documents, scripts in DOMParser
-created documents, scripts in documents created by
XSLTProcessor
's transformToDocument
feature, and scripts
that are first inserted by a script into a Document
that was created using the
createDocument()
API. [XHR] [DOMPARSING] [DOM]
If the script
element has an event
attribute and a for
attribute, then run these substeps:
Let for be the value of the for
attribute.
Let event be the value of the event
attribute.
Strip leading and trailing whitespace from event and for.
If for is not an ASCII case-insensitive match for the
string "window
", then the user agent must abort these steps at this
point. The script is not executed.
If event is not an ASCII case-insensitive match for
either the string "onload
" or the string "onload()
", then the user agent must abort these steps at this point. The script
is not executed.
If the script
element has a charset
attribute, then let the script block's character encoding for this
script
element be the result of getting an encoding from the value of
the charset
attribute.
Otherwise, let the script block's fallback character encoding for this
script
element be the same as the
encoding of the document itself.
Only one of these two pieces of state is set.
If the element has a src
content attribute, run these
substeps:
Let src be the value of the element's src
attribute.
If src is the empty string, queue a task to fire
a simple event named error
at the element, and abort
these steps.
Resolve src relative to the element.
If the previous step failed, queue a task to fire a simple
event named error
at the element, and abort these
steps.
Do a potentially CORS-enabled fetch of the resulting
absolute URL, with the mode being the current state of the element's crossorigin
content attribute, the origin being the origin of the script
element's
Document
, and the default origin behaviour set to taint.
The resource obtained in this fashion can be either CORS-same-origin or CORS-cross-origin. This only affects how error reporting happens.
For performance reasons, user agents may start fetching the script (as defined above) as
soon as the src
attribute is set, instead, in the hope
that the element will be inserted into the document (and that the crossorigin
attribute won't change value in the
meantime). Either way, once the element is inserted into the document, the load must have started as described in this
step. If the UA performs such prefetching, but the element is never inserted in the document,
or the src
attribute is dynamically changed, or the crossorigin
attribute is dynamically changed, then the
user agent will not execute the script so obtained, and the fetching process will have been
effectively wasted.
Then, the first of the following options that describes the situation must be followed:
src
attribute, and the element has a defer
attribute, and
the element has been flagged as "parser-inserted", and the element does not have
an async
attributeThe element must be added to the end of the list of scripts that will execute when the
document has finished parsing associated with the Document
of the parser
that created the element.
The task that the networking task source places on the task queue once the fetching algorithm has completed must set the element's "ready to be parser-executed" flag. The parser will handle executing the script.
src
attribute, and the element has been flagged as
"parser-inserted", and the element does not have an async
attributeThe element is the pending parsing-blocking script of the
Document
of the parser that created the element. (There can only be one such
script per Document
at a time.)
The task that the networking task source places on the task queue once the fetching algorithm has completed must set the element's "ready to be parser-executed" flag. The parser will handle executing the script.
src
attribute, and the element has been flagged as
"parser-inserted", and either the parser that created the script
is
an XML parser or it's an HTML parser whose script nesting
level is not greater than one, and the Document
of the HTML
parser or XML parser that created the script
element has
a style sheet that is blocking scriptsThe element is the pending parsing-blocking script of the
Document
of the parser that created the element. (There can only be one such
script per Document
at a time.)
Set the element's "ready to be parser-executed" flag. The parser will handle executing the script.
src
attribute, does not have an async
attribute, and does not have the
"force-async" flag setThe element must be added to the end of the list of scripts that will execute in order
as soon as possible associated with the Document
of the script
element at the time the prepare a script algorithm started.
The task that the networking task source places on the task queue once the fetching algorithm has completed must run the following steps:
If the element is not now the first element in the list of scripts that will execute in order as soon as possible to which it was added above, then mark the element as ready but abort these steps without executing the script yet.
Execution: Execute the script block corresponding to the first script element in this list of scripts that will execute in order as soon as possible.
Remove the first element from this list of scripts that will execute in order as soon as possible.
If this list of scripts that will execute in order as soon as possible is still not empty and the first entry has already been marked as ready, then jump back to the step labeled execution.
src
attributeThe element must be added to the set of scripts that will execute as soon as
possible of the Document
of the script
element at the time the
prepare a script algorithm started.
The task that the networking task source places on the task queue once the fetching algorithm has completed must execute the script block and then remove the element from the set of scripts that will execute as soon as possible.
Fetching an external script must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined above) has been run.
The pending parsing-blocking script of a Document
is used by the
Document
's parser(s).
If a script
element that blocks a parser gets moved to another
Document
before it would normally have stopped blocking that parser, it nonetheless
continues blocking that parser until the condition that causes it to be blocking the parser no
longer applies (e.g. if the script is a pending parsing-blocking script because there
was a style sheet that is blocking scripts when it was parsed, but then the script is
moved to another Document
before the style sheet loads, the script still blocks the
parser until the style sheets are all loaded, at which time the script executes and the parser is
unblocked).
When the user agent is required to execute a script block, it must run the following steps:
If the element is flagged as "parser-inserted", but the element's
Document
is not the Document
of the parser that created the element,
then abort these steps.
Jump to the appropriate set of steps from the list below:
Executing the script block must just consist of firing
a simple event named error
at the element.
Executing the script block must consist of running the following steps. For the purposes of
these steps, the script is considered to be from an external file if, while the
prepare a script algorithm above was running for this script, the
script
element had a src
attribute
specified.
Initialise the script block's source as follows:
The contents of that file, interpreted as a Unicode string, are the script source.
To obtain the Unicode string, the user agent run the following steps:
If the resource's Content Type metadata, if any, specifies a character encoding, and the user agent supports that encoding, then let character encoding be that encoding, and jump to the bottom step in this series of steps.
If the algorithm above set the script block's character encoding, then let character encoding be that encoding, and jump to the bottom step in this series of steps.
Let character encoding be the script block's fallback character encoding.
If the specification for the script block's type gives specific rules for decoding files in that format to Unicode, follow them, using character encoding as the character encoding specified by higher-level protocols, if necessary.
Otherwise, decode the file to Unicode, using character encoding as the fallback encoding.
The decode algorithm overrides character encoding if the file contains a BOM.
The external file is the script source. When it is later executed, it must be interpreted in a manner consistent with the specification defining the language given by the script block's type.
The value of the text
IDL attribute at the time
the element's "already started" flag was last set is the script source.
The child nodes of the script
element at the time the element's
"already started" flag was last set are the script source.
Fire a simple event named beforescriptexecute
that bubbles and is cancelable
at the script
element.
If the event is canceled, then abort these steps.
If the script is from an external file, then increment the
ignore-destructive-writes counter of the script
element's
Document
. Let neutralised doc be that
Document
.
Let old script element be the value to which the script
element's Document
's currentScript
object was most recently
initialized.
Initialise the script
element's Document
's currentScript
object to the script
element.
Create a script, using the script block's source, the
URL from which the script was obtained, the script block's type as
the scripting language, and the script settings object of the
script
element's Document
's Window
object.
If the script came from a resource that was fetched in the steps above, and the resource was CORS-cross-origin, then pass the muted errors flag to the create a script algorithm as well.
This is where the script is compiled and actually executed.
Initialise the script
element's Document
's currentScript
object to old script
element.
Decrement the ignore-destructive-writes counter of neutralised doc, if it was incremented in the earlier step.
Fire a simple event named afterscriptexecute
that bubbles (but is not
cancelable) at the script
element.
If the script is from an external file, fire a simple event named load
at the script
element.
Otherwise, the script is internal; queue a task to fire a simple
event named load
at the script
element.
The IDL attributes src
, type
, charset
, defer
, each must reflect the respective
content attributes of the same name.
The crossOrigin
IDL attribute must
reflect the crossorigin
content
attribute, limited to only known values.
The async
IDL attribute controls whether the
element will execute asynchronously or not. If the element's "force-async" flag is
set, then, on getting, the async
IDL attribute must return
true, and on setting, the "force-async" flag must first be unset, and then the
content attribute must be removed if the IDL attribute's new value is false, and must be set to
the empty string if the IDL attribute's new value is true. If the element's
"force-async" flag is not set, the IDL attribute must reflect
the async
content attribute.
text
[ = value ]Text
ノードでない子ノードを無視して、要素の内容を返す。
与えられた値を持つ要素の子を置換するために、設定できる。
The IDL attribute text
must return a
concatenation of the contents of all the Text
nodes that are children of the
script
element (ignoring any other nodes such as comments or elements), in tree
order. On setting, it must act the same way as the textContent
IDL attribute.
document.write()
メソッドを用いて挿入される場合、script
要素は(一般に同期して)実行するが、innerHTML
およびouterHTML
属性を用いて挿入される場合、これらは一切実行しない。
次の例において、2つのscript
要素が使用される。1つは外部スクリプトに埋め込み、もう1つはデータを含む。
<script src="game-engine.js"></script> <script type="text/x-game-map"> ........U.........e o............A....e .....A.....AAA....e .A..AAA...AAAAA...e </script>
この場合のデータは、ビデオゲームのマップを生成するスクリプトによって使用されるかもしれない。しかし、データはそのように使用する必要はない。おそらく実際にマップデータは、ページのマークアップの他の部分に埋め込まれており、ここでデータブロックは、ゲームマップで特定の機能を探しているユーザーを支援するサイトの検索エンジンによって単に使用される。
次のサンプルは、どのようにスクリプト要素が文書の他の部分で使用される関数を定義するために使用することができるかを示す。また、フォームの出力を初期化する場合に、文書が解析されている間にscript
要素がスクリプトを呼び出すために使用されうる方法を示す。
<script> function calculate(form) { var price = 52000; if (form.elements.brakes.checked) price += 1000; if (form.elements.radio.checked) price += 2500; if (form.elements.turbo.checked) price += 5000; if (form.elements.sticker.checked) price += 250; form.elements.result.value = price; } </script> <form name="pricecalc" onsubmit="return false" onchange="calculate(this)"> <fieldset> <legend>Work out the price of your car</legend> <p>Base cost: £52000.</p> <p>Select additional options:</p> <ul> <li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li> <li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li> <li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li> <li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li> </ul> <p>Total: £<output name=result></output></p> </fieldset> <script> calculate(document.forms.pricecalc); </script> </form>
A user agent is said to support the scripting language if each component of the script block's type is an ASCII case-insensitive match for the corresponding component in the MIME type string of a scripting language that the user agent implements.
以下の表は、ユーザーエージェントが認識しなければならないMIMEタイプ文字列および参照する言語である:
application/ecmascript
"application/javascript
"application/x-ecmascript
"application/x-javascript
"text/ecmascript
"text/javascript
"text/javascript1.0
"text/javascript1.1
"text/javascript1.2
"text/javascript1.3
"text/javascript1.4
"text/javascript1.5
"text/jscript
"text/livescript
"text/x-ecmascript
"text/x-javascript
"User agents may support other MIME types for other languages, but must not support other MIME types for the languages in the list above. User agents are not required to support the languages listed above.
The following MIME types (with or without parameters) must not be interpreted as scripting languages:
text/plain
"
text/xml
"
application/octet-stream
"
application/xml
"
These types are explicitly listed here because they are poorly-defined types that are nonetheless likely to be used as formats for data blocks, and it would be problematic if they were suddenly to be interpreted as script by a user agent.
When examining types to determine if they represent supported languages, user agents must not ignore MIME parameters. Types are to be compared including all parameters.
For example, types that include the charset
parameter will
not be recognised as referencing any of the scripting languages listed above.
script
要素のコンテンツの制約この節で説明される多少奇妙な制約を回避する最も簡単で安全な方法は、以下のシーケンスが(たとえば文字列、正規表現、またはコメントなど)スクリプト内でリテラルに表示され、かつ式の中でこのような構造体を使用してコードを記述を避けるようにする際に、"<!--
"を"<\!--
"として、"<script
"を"<\script
"として、および"</script
"を"<\/script
"として常にエスケープすることである。この節の制限がトリガーになりやすい落とし穴を回避する:すなわち、歴史的な理由のために、HTMLにおけるscript
ブロックの解析は、これらのシーケンスを考えた場合に直観的でない働きをする奇妙で風変わりな慣習である。
script
要素のtextContent
は、Unicodeである文字セットである、以下のABNFでscript
生成物と対等でなければならない。[ABNF]
script = outer *( comment-open inner comment-close outer ) outer = < any string that doesn't contain a substring that matches not-in-outer > not-in-outer = comment-open inner = < any string that doesn't contain a substring that matches not-in-inner > not-in-inner = comment-close / script-open comment-open = "<!--" comment-close = "-->" script-open = "<" s c r i p t tag-end s = %x0053 ; U+0053 LATIN CAPITAL LETTER S s =/ %x0073 ; U+0073 LATIN SMALL LETTER S c = %x0043 ; U+0043 LATIN CAPITAL LETTER C c =/ %x0063 ; U+0063 LATIN SMALL LETTER C r = %x0052 ; U+0052 LATIN CAPITAL LETTER R r =/ %x0072 ; U+0072 LATIN SMALL LETTER R i = %x0049 ; U+0049 LATIN CAPITAL LETTER I i =/ %x0069 ; U+0069 LATIN SMALL LETTER I p = %x0050 ; U+0050 LATIN CAPITAL LETTER P p =/ %x0070 ; U+0070 LATIN SMALL LETTER P t = %x0054 ; U+0054 LATIN CAPITAL LETTER T t =/ %x0074 ; U+0074 LATIN SMALL LETTER T tag-end = %x0009 ; "tab" (U+0009) tag-end =/ %x000A ; "LF" (U+000A) tag-end =/ %x000C ; "FF" (U+000C) tag-end =/ %x0020 ; U+0020 SPACE tag-end =/ %x002F ; "/" (U+002F) tag-end =/ %x003E ; ">" (U+003E)
script
要素がスクリプト文書を含む場合、以下の節で記述されるように、要素のコンテンツのさらなる制約がある。
以下のスクリプトは、この問題を示している。このように、文字列が含まれているスクリプトがあるとする:
var example = 'Consider this string: <!-- <script>'; console.log(example);
これがscript
ブロックで直接この文字列を入れていた場合、上記の制限に違反しない。
<script> var example = 'Consider this string: <!-- <script>'; console.log(example); </script>
しかし、より大きな問題かつ、スクリプトがそれらの制限に違反しない理由は、実際にスクリプトが奇妙に解析されるだろうということである。上記のスクリプトブロックは終了していない。それは、実際には依然としてscript
ブロックの一部であるこのスニペットにおいて"</script>
"終了タグのように見えるものである。(スクリプトが終了していないため)スクリプトは実行しない。スクリプトが何らかの形で実行した場合、以下のようにマークアップが見えた場合、(ここで強調される)スクリプトが妥当なJavaScriptでないので、スクリプトは失敗するだろう:
<script> var example = 'Consider this string: <!-- <script>'; console.log(example); </script> <!-- despite appearances, this is actually part of the script still! --> <script> ... // this is the same script block still... </script>
ここで起こっていることはレガシーな理由のために、HTMLにおけるscript
要素で"<!--
"および "<script
"文字列は、パーサがブロックを閉じる検討するためにバランスをとる必要がある。
この節の最初に述べたように、問題の文字列をエスケープすることによって、問題は完全に回避されている:
<script> var example = 'Consider this string: <\!-- <\script>'; console.log(example); </script> <!-- this is just a comment between script blocks --> <script> ... // this is a new script block </script>
次の例のように、これらのシーケンスは自然にスクリプト式で出現可能である:
if (x<!--y) { ... } if ( player<script ) { ... }
このような場合、文字はエスケープすることはできないが、シーケンスが発生しないように式は次のように書き換えることができる:
if (x < !--y) { ... } if (!--y > x) { ... } if (!(--y) > x) { ... } if (player < script) { ... } if (script > player) { ... }
これを行うとはまた、同様に様々な落とし穴を回避する:関連する歴史的な理由のために、JavaScriptで文字列"<!--"は、"//"のように、実際には行コメントの開始として扱われる。
script
要素のsrc
属性が指定される場合、もしあれば、script
要素のコンテンツは、要素のコンテンツから分割されるようなtext
IDL属性値でなければならず、文字セットがUnicodeである下記のABNFでdocumentation
生成物と一致しなければならない。[ABNF]
documentation = *( *( space / tab / comment ) [ line-comment ] newline ) comment = slash star *( not-star / star not-slash ) 1*star slash line-comment = slash slash *not-newline ; characters tab = %x0009 ; "tab" (U+0009) newline = %x000A ; "LF" (U+000A) space = %x0020 ; U+0020 SPACE star = %x002A ; "*" (U+002A) slash = %x002F ; "/" (U+002F) not-newline = %x0000-0009 / %x000B-10FFFF ; a Unicode character other than "LF" (U+000A) not-star = %x0000-0029 / %x002B-10FFFF ; a Unicode character other than "*" (U+002A) not-slash = %x0000-002E / %x0030-10FFFF ; a Unicode character other than "/" (U+002F)
これは、JavaScriptのコメントで要素のコンテンツを設置するものと一致する。
この要求は、script
要素のコンテンツの構文上に先の制約に加えて存在する。
以下は、依然として外部スクリプトファイルを参照する間に文書内で、著者がライセンス情報やAPI情報のような文書を含むことを許可する。src
属性を提供する一方で、偶然にも著者が有効なスクリプトのように見えるものが含まないように、構文は制約される。
<script src="cool-effects.js"> // create new instances using: // var e = new Effect(); // start the effect using .play, stop using .stop: // e.play(); // e.stop(); </script>
script
elements and XSLTこの節は非規範的である。
This specification does not define how XSLT interacts with the script
element.
However, in the absence of another specification actually defining this, here are some guidelines
for implementors, based on existing implementations:
When an XSLT transformation program is triggered by an processing instruction and the browser implements a
direct-to-DOM transformation,
script
elements created by the XSLT processor need to
be marked "parser-inserted" and run in document order (modulo scripts marked defer
or async
),
asynchronously while the transformation is occurring.
The XSLTProcessor.transformToDocument()
method
adds elements to a Document
that is not in a browsing context, and,
accordingly, any script
elements they create need to have their "already
started" flag set in the prepare a script algorithm and never get executed
(scripting is disabled). Such script
elements still need to be marked "parser-inserted", though, such that their async
IDL attribute will return false in the absence of an async
content attribute.
The XSLTProcessor.transformToFragment()
method
needs to create a fragment that is equivalent to one built manually by creating the elements
using document.createElementNS()
. For instance,
it needs to create script
elements that aren't "parser-inserted" and
that don't have their "already started" flag set, so that they will execute when the
fragment is inserted into a document.
The main distinction between the first two cases and the last case is that the first two
operate on Document
s and the last operates on a fragment.
noscript
要素noscript
要素が存在しない場合、HTML文書のhead
要素内。noscript
要素が存在しない場合、HTML文書でフレージングコンテンツが期待される場所。head
要素内で:任意の順で、0個以上のlink
要素、ゼロ個以上のstyle
要素、0個以上のmeta
要素。head
要素外で:透過的。ただし、noscript
要素の子孫を持ってはならない。HTMLElement
を使用する。noscript
要素は、スクリプトが有効である場合は何も表さず、スクリプトが無効である場合は要素の子を表す。これは、文書が解析される方法に影響を与えることによって、スクリプトをサポートするユーザーエージェントとサポートしないユーザーエージェントに異なるマークアップを提示するために使用される。
HTML文書で使用する場合、許可されるコンテンツモデルは次のとおり:
head
要素内のnoscript
要素に対してhead
要素内のnoscript
要素に対してnoscript
要素は、テキストのみを含まなければならない。ただし、context要素としてnoscript
要素をもつHTML断片解析アルゴリズムを呼び出すものかつinputのようなテキストコンテンツがnoscript
要素の子であった場合、link
、style
、meta
要素のみからなるノードのリストをもたらさなければならない場合を除く。そして解析エラーでない。
head
要素外のnoscript
要素に対してnoscript
要素のコンテンツモデルは透過的であり、同時にnoscript
要素がnoscript
要素を持ってはならない(noscript
要素を入れ子にできない)追加制限がある。
head
要素外のnoscript
要素に対してnoscript
要素はテキストのみを含まなければならない。ただしテキストは、以下のアルゴリズムがnoscript
要素およびscript
要素をもたない適合文書をもたらすものでなければならず、アルゴリズムでステップは例外を投げるまたはHTMLパーサに解析エラーを起こさないようにしなければならない:
歴史的な理由により、パーサが呼び出されたときにスクリプトが有効にされたかどうかに基づくHTMLパーサによってnoscript
要素が異なる方法で処理されるので、これらのすべてのこじつけが必要とされる。
noscript
要素はHTML構文でのみ有効だが、XHTML構文では効果がない。スクリプトが有効である場合、この要素が動作する方法は、基本的にパーサを"オフ"にすることであり、要素の内容は、実際の要素としてではなく純粋にテキストとして扱われているのである。XMLは、これを実行するためのメカニズムを定義しない。
The noscript
element has no other requirements. In particular, children of the
noscript
element are not exempt from form submission, scripting, and so
forth, even when scripting is enabled for the element.
次の例において、noscript
要素は、スクリプトのフォールバックを提供するために使用される。
<form action="calcSquare.php"> <p> <label for=x>Number</label>: <input id="x" name="x" type="number"> </p> <script> var x = document.getElementById('x'); var output = document.createElement('p'); output.textContent = 'Type a number; it will be squared right then!'; x.form.appendChild(output); x.form.onsubmit = function () { return false; } x.oninput = function () { var v = x.valueAsNumber; output.textContent = v + ' squared is ' + v * v; }; </script> <noscript> <input type=submit value="Calculate Square"> </noscript> </form>
スクリプトが無効である場合、ボタンは、サーバー側で計算を行うために表示される。スクリプトが有効である場合、代わりに値がその場で計算される。
noscript
要素は鈍器である。時には、スクリプトを有効にするかもしれないが、何らかの理由でページのスクリプトが失敗するかもしれない。このような理由から、次の例のように、noscript
要素の使用を避ける代わりに、その場でスクリプトのないページからスクリプト化されたページにページを変更するスクリプトを設計することが一般により良い:
<form action="calcSquare.php"> <p> <label for=x>Number</label>: <input id="x" name="x" type="number"> </p> <input id="submit" type=submit value="Calculate Square"> <script> var x = document.getElementById('x'); var output = document.createElement('p'); output.textContent = 'Type a number; it will be squared right then!'; x.form.appendChild(output); x.form.onsubmit = function () { return false; } x.oninput = function () { var v = x.valueAsNumber; output.textContent = v + ' squared is ' + v * v; }; var submit = document.getElementById('submit'); submit.parentNode.removeChild(submit); </script> </form>
template
要素span
属性を持たないcolgroup
要素の子として。ol
およびul
要素のコンテンツモデル。dl
要素のコンテンツモデル。figure
要素のコンテンツモデル。ruby
要素のコンテンツモデル。object
要素のコンテンツモデル。video
およびaudio
要素のコンテンツモデル。table
要素のコンテンツモデル。colgroup
要素のコンテンツモデル。thead
、tbody
およびtfoot
要素のコンテンツモデル。tr
要素のコンテンツモデル。fieldset
要素のコンテンツモデル。select
要素のコンテンツモデル。details
要素のコンテンツモデル。type
属性がポップアップメニュー状態であるmenu
要素のコンテンツモデル。interface HTMLTemplateElement : HTMLElement { readonly attribute DocumentFragment content; };
template
要素は、複製され、スクリプトによって文書に挿入できるHTMLの断片を宣言するために使用される。
テンプレートは、不活性DOMサブツリーを宣言し、サブツリーを同一の内容で文書断片をインスタンス化するために操作する方法を提供する。
ウェブページを動的に(たとえば、ユーザーとの対話またはサーバーから到着する新しいデータに応答して)文書の内容を変更する場合、使用コンテキストに適切な値を挿入するように、使用する前にさらなる変更を必要とするかもしれないHTMLの断片を要求することが一般的である。
template
要素は、読み込み時に文書で使用されない文書断片の宣言を許可するが、HTMLとして解析され、ウェブページで使用するために実行時に利用可能である。
content
主Document
に干渉するtemplate
のコンテンツを避けるために別のDocument
に関連付けられたDocumentFragment
に格納されているtemplate
のコンテンツを返す。(たとえば、これはフォームコントロールから送信されていくことを回避し、スクリプト実行から回避するなど。)
Each template
element has an associated DocumentFragment
object that
is its template contents. When a template
element is created, the user
agent must run the following steps to establish the template contents:
Let doc be the template
element's ownerDocument
's appropriate template contents owner
document.
Create a DocumentFragment
object whose ownerDocument
is doc.
Set the template
element's template contents to the newly
created DocumentFragment
object.
A Document
doc's appropriate template contents owner
document is the Document
returned by the following algorithm:
If doc is not a Document
created by this algorithm, run
these substeps:
If doc does not yet have an associated inert template document then run these substeps:
Let new doc be a new Document
(that does not have a
browsing context). This is "a Document
created by this algorithm"
for the purposes of the step above.
If doc is an HTML document, mark new doc as an HTML document also.
Let doc's associated inert template document be new doc.
Set doc to doc's associated inert template document.
Each Document
not created by this algorithm thus gets a single
Document
to act as its proxy for owning the template contents of all
its template
elements, so that they aren't in a browsing context and
thus remain inert (e.g. scripts do not run). Meanwhile, template
elements inside
Document
objects that are created by this algorithm just reuse the same
Document
owner for their contents.
Return doc.
When a template
element changes ownerDocument
, the user agent must run the following
steps:
Let doc be the template
element's new ownerDocument
's appropriate template contents owner
document.
Adopt the template
element's
template contents (a DocumentFragment
object) into doc.
The content
IDL attribute must return the
template
element's template contents.
The cloning steps for a template
element node being cloned to a copy copy must run the
following steps:
If the clone children flag is not set in the calling clone algorithm, abort these steps.
Let copied contents be the result of cloning all the children of node's
template contents, with ownerDocument set to copy's template contents's ownerDocument
, and with the clone children
flag set.
Append copied contents to copy's template contents.
この例において、手動でマークアップから構造体を生成する代わりに要素構造を提供するtemplate
を使用して、スクリプトがデータ構造由来のデータをもつ表を事前設定する。
<!DOCTYPE html> <title>Cat data</title> <script> // Data is hard-coded here, but could come from the server var data = [ { name: 'Pillar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 }, { name: 'Hedral', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 }, ]; </script> <table> <thead> <tr> <th>Name <th>Color <th>Sex <th>Legs <tbody> <template id="row"> <tr><td><td><td><td> </template> </table> <script> var template = document.querySelector('#row'); for (var i = 0; i < data.length; i += 1) { var cat = data[i]; var clone = template.content.cloneNode(true); var cells = clone.querySelectorAll('td'); cells[0].textContent = cat.name; cells[1].textContent = cat.color; cells[2].textContent = cat.sex; cells[3].textContent = cat.legs; template.parentNode.appendChild(clone); } </script>
template
elements with XSLT and XPathこの節は非規範的である。
This specification does not define how XSLT and XPath interact with the template
element. However, in the absence of another specification actually defining this, here are some
guidelines for implementors, which are intended to be consistent with other processing described
in this specification:
An XSLT processor based on an XML parser that acts as described
in this specification needs to act as if template
elements contain as
descendants their template contents for the purposes of the transform.
An XSLT processor that outputs a DOM needs to ensure that nodes that would go into a
template
element are instead placed into the element's template
contents.
XPath evaluation using the XPath DOM API when applied to a Document
parsed
using the HTML parser or the XML parser described in this specification
needs to ignore template contents.
canvas
要素width
height
typedef (CanvasRenderingContext2D or WebGLRenderingContext) RenderingContext;
interface HTMLCanvasElement : HTMLElement {
attribute unsigned long width;
attribute unsigned long height;
RenderingContext? getContext(DOMString contextId, any... arguments);
boolean probablySupportsContext(DOMString contextId, any... arguments);
void setContext(RenderingContext context);
CanvasProxy transferControlToProxy();
DOMString toDataURL(optional DOMString type, any... arguments);
void toBlob(FileCallback? _callback, optional DOMString type, any... arguments);
};
canvas
要素は、グラフ、ゲームグラフィック、芸術、またはその他の視覚的な画像をその場でレンダリングするために使用できる、解像度に依存するビットマップキャンバスを伴うスクリプトを提供する。
より適切な要素が利用可能である場合、著者は文書でcanvas
要素を使うべきでない。たとえば、見出し、ページを描画するcanvas
要素を使用することは不適当である:見出しの望ましいプレゼンテーショングラフィカルが強烈である場合、それは適切な要素(典型的には h1
)を使用してマークアップし、CSSを使用していて、ウェブコンポーネントのような技術をサポートするスタイリングする必要がある。
著者がcanvas
要素を使用する場合、著者はまた、ユーザーに提示する際、canvas
のビットマップとして同じ機能や目的を基本的に伝えるコンテンツを提供しなければならない。このコンテンツはcanvas
要素のコンテンツとして置かれてもよい。canvas
要素のコンテンツは、もしあれば、その要素のフォールバックコンテンツである。
対話的な視覚メディアにおいて、canvas
要素に対してスクリプティングが有効である場合、かつcanvas
要素に対するサポートが有効である場合、canvas
要素は、動的に作成された画像ジから成るエンベディッドコンテンツを表す。
静的で、非対話的な視覚メディアにおいて、canvas
要素が以前に描かれている場合(たとえば、ページがインタラクティブな視覚媒体で表示され、現在描かれている場合、またはページレイアウトプロセス中に実行された一部のスクリプトが要素で描かれた場合)、canvas
要素は、現在のビットマップとサイズをもつエンベディッドコンテンツを表す。そうでなければ、要素は代わりにそのフォールバックコンテンツを表す。
非視覚系メディアにおいて、かつ視覚メディアでcanvas
要素に対してスクリプトが無効である場合、またはcanvas
要素のサポートが無効である場合、canvas
要素は代わりにフォールバックコンテンツを表す。
canvas
要素がエンベディッドコンテンツを表す場合、ユーザーはcanvas
要素の子孫(フォールバックコンテンツ内)にフォーカスできる。要素がフォーカスされている場合、(要素自体が表示されていなくても)キーボード操作イベントの対象となる。これは、著者がインタラクティブキャンバスをキーボードアクセシブルにできる:著者は、フォールバックコンテンツ内のフォーカス可能な要素にインタラクティブな領域の1対1対応を持つべきである。(フォーカスは、マウス操作のイベントに影響しない。)[DOMEVENTS]
canvas
要素は、要素ビットマップの大きさを制御するwidth
とheight
の2つの属性を持つ。指定される場合、これらの属性は妥当な非負の整数である値を持たなければならない。The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width
attribute defaults to 300, and the height
attribute defaults to 150.
要素がエンベディッドコンテンツを表す場合、canvas
要素の内在寸法は、要素のビットマップの内在寸法に等しい。
ユーザーエージェントは、canvas
とレンダリングコンテキストのビットマップに対する座標空間単位あたりの画像データの1画素からなる平方画素密度を使用しなければならない。
canvas
要素は、スタイルシートによって任意のサイズにでき、そのビットマップは'object-fit' CSSプロパティーの対象となる。[CSSIMAGES]
The bitmaps of canvas
elements, as well as some of the bitmaps of rendering
contexts, such as those described in the HTML Canvas 2D Context specification
[CANVAS2D],
have an origin-clean flag, which can
be set to true or false. Initially, when the canvas
element is created, its bitmap's
origin-clean flag must be set to true.
A canvas
bitmap can also have a hit region list, as described in the
CanvasRenderingContext2D
section below.
A canvas
element can have a rendering context bound to it. Initially, it does not
have a bound rendering context. To keep track of whether it has a rendering context or not, and
what kind of rendering context it is, a canvas
also has a canvas context mode, which is initially none but can be changed to either direct-2d, direct-webgl, indirect, or proxied by algorithms defined in this specification.
When its canvas context mode is none, a canvas
element has no rendering context,
and its bitmap must be fully transparent black with an intrinsic width equal to the numeric value
of the element's width
attribute and an intrinsic height
equal to the numeric value of the element's height
attribute, those values being interpreted in CSS pixels, and being updated as the attributes are
set, changed, or removed.
When a canvas
element represents embedded content, it provides
a paint source whose width is the element's intrinsic width, whose height is the element's
intrinsic height, and whose appearance is the element's bitmap.
Whenever the width
and height
content attributes are set, removed, changed, or
redundantly set to the value they already have, if the canvas context mode is direct-2d, the user agent must set bitmap dimensions to the numeric values of
the width
and height
content attributes.
The width
and height
IDL attributes must reflect the
respective content attributes of the same name, with the same defaults.
getContext
(contextId [, ... ] )キャンバス上に描画するためのAPIを公開するオブジェクトを返す。最初の引数は目的のAPIを指定する、"2d
"または"webgl
"のいずれかである。後続の引数は、そのAPIによって処理される。
定義されたコンテキストのリストは、WHATWG Wiki CanvasContexts pageに記載されている。[WHATWGWIKI]
例のコンテキストは、"2d
" [CANVAS2D]および"webgl
"コンテキスト[WEBGL]である。
与えられたコンテキストIDがサポートされない場合、またはキャンバスがすでに他の(非互換の)コンテキストタイプ(たとえば、"webgl
"コンテキストを取得した後、"2d
"コンテキストを取得しようとしている)で初期化されている場合、nullを返す。
setContext()
またはtransferControlToProxy()
メソッドが使用されている場合、InvalidStateError
例外を投げる。
probablySupportsContext
(contextId [, ... ] )同じ引数を持つgetContext()
のコールが明確にnullを返す場合はfalseを返し、そうでなければtrueを返す。
条件(たとえば、システムリソースの可用性)が時間の経過とともに変化できるものとして、この戻り値は、getContext()
がオブジェクトを返すかどうかの保証はない。
setContext()
またはtransferControlToProxy()
メソッドが使用されている場合、InvalidStateError
例外を投げる。
setContext
(context)canvas
のレンダリングコンテキストに与えられたオブジェクトを設定する。
getContext()
またはtransferControlToProxy()
メソッドが使用されている場合、InvalidStateError
例外を投げる。
There are two ways for a canvas
element to acquire a rendering context: the
canvas
element can provide one via the getContext()
method, and one can be assigned to it via the
setContext()
method. In addition, the whole issue of a
rendering context can be taken out of the canvas
element's hands and passed to a
CanvasProxy
object, which itself can then be assigned a rendering context using its
setContext()
method.
These three methods are mutually exclusive; calling any of the three makes the other two start
throwing InvalidStateError
exceptions when called.
Each rendering context has a context bitmap mode, which is one of fixed, unbound, or bound. Initially, rendering contexts must be in the unbound mode.
The getContext(contextId, arguments...)
method of the canvas
element, when invoked,
must run the steps in the cell of the following table whose column header describes the
canvas
element's canvas context mode
and whose row header describes the method's first argument.
なし | direct-2d | direct-webgl | indirect | proxied | |
---|---|---|---|---|---|
"2d "
|
Set the canvas element's context
mode to direct-2d, obtain a
CanvasRenderingContext2D object as defined in the HTML Canvas 2D Context
specification [CANVAS2D], set the obtained
CanvasRenderingContext2D object's
context bitmap mode to
fixed, and return the
CanvasRenderingContext2D object
| Return the same object as was return the last time the method was invoked with this same argument. | Return null. |
Throw an InvalidStateError exception.
|
Throw an InvalidStateError exception.
|
"webgl ", if the user agent supports the WebGL feature in its current configuration
|
Follow the instructions given in the WebGL specification's Context Creation section to
obtain either a WebGLRenderingContext or null; if the returned value is null,
then return null and abort these steps, otherwise, set the canvas element's context mode to direct-webgl, set the new
WebGLRenderingContext object's context bitmap mode to fixed, and return the WebGLRenderingContext
object‡ [WEBGL]
| Return null. | Return the same object as was return the last time the method was invoked with this same argument. |
Throw an InvalidStateError exception.
|
Throw an InvalidStateError exception.
|
A vendor-specific extension* | Behave as defined for the extension. | Behave as defined for the extension. | Behave as defined for the extension. |
Throw an InvalidStateError exception.
|
Throw an InvalidStateError exception.
|
An unsupported value† | Return null. | Return null. | Return null. |
Throw an InvalidStateError exception.
|
Throw an InvalidStateError exception.
|
* Vendors may define experimental contexts using the syntax vendorname-context
, for example,
moz-3d
.
† For example, the "webgl
" value in the case of a user agent having exhausted the
graphics hardware's abilities and having no software fallback implementation.
‡ The second (and subsequent) argument(s) to the method, if any, are ignored in all cases except this one. See the WebGL specification for details.
The probablySupportsContext(contextId,
arguments...)
method of the canvas
element, when
invoked, must return false if calling getContext()
on
the same object and with the same arguments would definitely return null at this time, and true
otherwise.
The setContext(context)
method of the canvas
element, when invoked, must
run the following steps:
If the canvas
element's canvas
context mode is neither none nor indirect, throw an InvalidStateError
exception and abort these steps.
contextのコンテキストビットマップモードが固定である場合、InvalidStateError
例外を投げ、これらの手順を中止する。
contextのコンテキストビットマップモードがバインドである場合、contextのバインド解除の手順を実行し、されていないと、そのcontextのコンテキストビットマップモードをアンバインドに設定する。
Run context's binding
steps to bind it to this canvas
element.
Set the canvas
element's context
mode to indirect and the context's context bitmap
mode to bound.
toDataURL
( [ type, ... ] )キャンバスで画像に対するdata:
URLを返す。
最初の引数が与えられた場合、返される画像の型(たとえば、PNGまたはJPEG)を制御する。デフォルトはimage/png
である。指定された型がサポートされない場合、そのタイプも使用される。他の引数は型に固有のものであり、以下の表に示すような画像が生成される方法を制御する。
"image/png
"以外の型を使用しようとする際、著者は、実際に返された文字列が正確にdata:image/png,
"または"data:image/png;
"のいずれかの文字列で始まるかどうかをチェックすることで、画像が要求された形式で返されたかどうかを確認できる。その場合、画像はPNGであり、したがって要求された型はサポートされない。(キャンバスが高さや幅のいずれかを持たない場合、このような例外の一つであり、結果は単に"data:,
"であるかもしれない)。
toBlob
(callback [, type, ... ] )キャンバス内の画像を含むファイルを表すBlob
オブジェクトを作成し、そのオブジェクトへのハンドルとともにコールバックを呼び出す。
2つ目の引数が与えられた場合、返される画像の型(たとえば、PNGまたはJPEG)を制御する。デフォルトはimage/png
である。指定された型がサポートされない場合、そのタイプも使用される。他の引数は型に固有のものであり、以下の表に示すような画像が生成される方法を制御する。
The toDataURL()
method must run the
following steps:
If the canvas
element's bitmap's origin-clean flag is set to false, throw a
SecurityError
exception and abort these steps.
If the canvas
element's bitmap has no pixels (i.e. either its horizontal
dimension or its vertical dimension is zero) then return the string "data:,
" and abort these steps. (This is the shortest data:
URL; it represents the empty string in a text/plain
resource.)
Let file be a
serialization of the canvas
element's bitmap as a file, using the method's
arguments (if any) as the arguments.
The toBlob()
method must run the following
steps:
If the canvas
element's bitmap's origin-clean flag is set to false, throw a
SecurityError
exception and abort these steps.
Let callback be the first argument.
Let arguments be the second and subsequent arguments to the method, if any.
If the canvas
element's bitmap has no pixels (i.e. either its horizontal
dimension or its vertical dimension is zero) then let result be null.
Otherwise, let result be a Blob
object representing a serialization of the canvas
element's bitmap as a file, using arguments. [FILEAPI]
Return, but continue running these steps asynchronously.
If callback is null, abort these steps.
Queue a task to invoke the FileCallback
callback with result as its argument. The task
source for this task is the canvas blob serialization task source.
DOMノードは、ワーカーの境界を越えてアクセスすることはできないため、プロキシオブジェクトはワーカーがDocument
でcanvas
要素にレンダリングできるようにするために必要とされる。
[Exposed=Window,Worker] interface CanvasProxy { void setContext(RenderingContext context); }; // CanvasProxy implements Transferable;
transferControlToProxy
()別の文書(別の生成元からのiframe
など)へ、またはワーカーへ、このキャンバスに対して制御を移すために使用できるCanvasProxy
オブジェクトを返す。
getContext()
またはsetContext()
メソッドが使用されている場合、InvalidStateError
例外を投げる。
setContext
(context)指定されたオブジェクトにCanvasProxy
オブジェクトのcanvas
要素のレンダリングコンテキストを設定する。
CanvasProxy
が転送されている場合、InvalidStateError
例外を投げる。
canvas
要素のtransferControlToProxy()
メソッドが呼び出された場合、次の手順を実行しなければならない:
canvas
要素のキャンバスコンテキストモードがnoneでない場合は、InvalidStateError
例外を投げ、これらの手順を中止する。
このcanvas
要素にCanvasProxy
を返す。
CanvasProxy
オブジェクトは、もはや転送できないことを意味する(任意のTransferable
オブジェクトのように)neuteredであることができ、無効にすることができ、もはやレンダリングコンテキストにバインドされていないことを意味するdisabledとなることができる。最初に作成した際、CanvasProxy
オブジェクトはどちらもあってはならない。
CanvasProxy
はcanvas
要素へのリンクを使用して作成される。無効になっていないCanvasProxy
オブジェクトはcanvas要素への強い参照を持たなければならない。
CanvasProxy
オブジェクトのsetContext(context)
メソッドは、呼び出された際、次の手順を実行しなければならない:
CanvasProxy
オブジェクトが無効になっている場合、InvalidStateError
例外を投げ、これらの手順を中止する。
CanvasProxy
オブジェクトがneuteredされていない場合は、neuterする。
contextのコンテキストビットマップモードが固定である場合、InvalidStateError
例外を投げ、これらの手順を中止する。
contextのコンテキストビットマップモードがバインドである場合、contextのバインド解除の手順を実行し、されていないと、そのcontextのコンテキストビットマップモードをアンバインドに設定する。
このCanvasProxy
オブジェクトのcanvas
要素にバインドするcontextのバインディングの手順を実行する。
バウンドにcontextのコンテキストビットマップモードを設定する。
新しい所有者ownerに古いCanvasProxy
オブジェクトoldを転送するために、ユーザーエージェントは、このようにnew取得する、oldと同じcanvas
要素にリンクされた新しいCanvasProxy
オブジェクトを作成しなければならず、oldオブジェクトをneuterかつ無効にし、最終的にnewを返さなければならない。
これはワーカー上に実装されたクロックである。まず、メインページ:
<!DOCTYPE HTML> <title>Clock</title> <canvas></canvas> <script> var canvas = document.getElementsByTagName('canvas')[0]; var proxy = canvas.transferControlToProxy(); var worker = new Worker('clock.js'); worker.postMessage(proxy, [proxy]); </script>
次に、ワーカー:
onmessage = function (event) { var context = new CanvasRenderingContext2D(); event.data.setContext(context); // event.data is the CanvasProxy object setInterval(function () { context.clearRect(0, 0, context.width, context.height); context.fillText(new Date(), 0, 100); context.commit(); }, 1000); };
The canvas
APIs must perform color correction at only two points: when rendering
images with their own gamma correction and color space information onto a bitmap, to convert the
image to the color space used by the bitmaps (e.g. using the 2D Context's drawImage()
method with an HTMLImageElement
object), and when rendering the actual canvas bitmap to the output device.
Thus, in the 2D context, colors used to draw shapes onto the canvas will exactly
match colors obtained through the getImageData()
method.
The toDataURL()
method must not include color space
information in the resources they return. Where the output format allows it, the color of pixels
in resources created by toDataURL()
must match those
returned by the getImageData()
method.
In user agents that support CSS, the color space used by a canvas
element must
match the color space used for processing any colors for that element in CSS.
The gamma correction and color space information of images must be handled in such a way that
an image rendered directly using an img
element would use the same colors as one
painted on a canvas
element that is then itself rendered. Furthermore, the rendering
of images that have no color correction information (such as those returned by the toDataURL()
method) must be rendered with no color
correction.
Thus, in the 2D context, calling the drawImage()
method to render the output of the toDataURL()
method to the canvas, given the appropriate
dimensions, has no visible effect.
When a user agent is to create a serialization of the bitmap as a file, optionally with some given arguments, and optionally with a native flag set, it must create an image file in the format given by the first value of arguments, or, if there are no arguments, in the PNG format. [PNG]
If the native flag is set, or if the bitmap has one pixel per coordinate space unit, then the image file must have the same pixel data (before compression, if applicable) as the bitmap, and if the file format used supports encoding resolution metadata, the resolution of that bitmap (device pixels per coordinate space units being interpreted as image pixels per CSS pixel) must be given as well.
Otherwise, the image file's pixel data must be the bitmap's pixel data scaled to one image pixel per coordinate space unit, and if the file format used supports encoding resolution metadata, the resolution must be given as 96dpi (one image pixel per CSS pixel).
If arguments is not empty, the first value must be interpreted as a MIME type giving the format to use. If the type has any parameters, it must be treated as not supported.
For example, the value "image/png
" would mean to generate a PNG
image, the value "image/jpeg
" would mean to generate a JPEG image, and the value
"image/svg+xml
" would mean to generate an SVG image (which would require that the
user agent track how the bitmap was generated, an unlikely, though potentially awesome,
feature).
User agents must support PNG ("image/png
"). User agents may support other types.
If the user agent does not support the requested type, it must create the file using the PNG
format. [PNG]
User agents must convert the provided type to ASCII lowercase before establishing if they support that type.
For image types that do not support an alpha channel, the serialised image must be the bitmap image composited onto a solid black background using the source-over operator.
If the first argument in arguments gives a type corresponding to one of the types given in the first column of the following table, and the user agent supports that type, then the subsequent arguments, if any, must be treated as described in the second cell of that row.
型 | 他の引数 | 参照 |
---|---|---|
image/jpeg
| The second argument, if it is a number in the range 0.0 to 1.0 inclusive, must be treated as the desired quality level. If it is not a number or is outside that range, the user agent must use its default value, as if the argument had been omitted. | [JPEG] |
For the purposes of these rules, an argument is considered to be a number if it is converted to
an IDL double value by the rules for handling arguments of type any
in the
Web IDL specification. [WEBIDL]
Other arguments must be ignored and must not cause the user agent to throw an exception. A future version of this specification will probably define other parameters to be passed to these methods to allow authors to more carefully control compression settings, image metadata, etc.
canvas
elementsこの節は非規範的である。
Information leakage can occur if scripts from one origin can access information (e.g. read pixels) from images from another origin (one that isn't the same).
To mitigate this, bitmaps used with canvas
elements are defined to have a flag
indicating whether they are origin-clean. All
bitmaps start with their origin-clean set to
true. The flag is set to false when cross-origin images or fonts are used.
The toDataURL()
, toBlob()
, and getImageData()
methods check the flag and will
throw a SecurityError
exception rather than leak cross-origin data.
The flag can be reset in certain situations; for example, when a
CanvasRenderingContext2D
is bound to a new canvas
, the bitmap is cleared
and its flag reset.