window.onload対<body onload =“” />


227

window.onloadイベントとタグのonloadイベントの違いは何bodyですか?いつどのように使用し、正しく実行する必要がありますか?


2
属性値を囲むには「」を使用する必要があります
Sven Larson

回答:


218

window.onload = myOnloadFuncそして、<body onload="myOnloadFunc();">使用の異なる方法があり、同じイベントをwindow.onloadただし、使用する方が邪魔にならない-JavaScriptをHTMLから取り出す。

一般的なJavaScriptライブラリ、Prototype、ExtJS、Dojo、JQuery、YUIなどはすべて、ドキュメントが読み込まれるときに発生するイベントのラッパーを提供します。ウィンドウのonLoadイベントをリッスンしてそれに反応することができますが、すべてのリソースがダウンロードされるまでonLoadは起動されないため、最後の巨大なイメージがフェッチされるまでイベントハンドラーは実行されません。場合によっては、まさにそれが望ましい場合もあれば、DOMの準備ができたときにリッスンする方が適切である場合もあります。このイベントはonLoadに似ていますが、画像などがダウンロードされるのを待たずに発生します。


57
ただし、違いがあることに注意してください。インラインのonloadイベントがmyOnloadFunc()グローバルコンテキストで呼び出されます(thisを参照window)。JavaScriptで設定すると、要素のコンテキストで実行されます(thisイベントがトリガーされた要素を参照します)。この特定のケースでは、違いはありませんが、他の要素では違いがあります。
mowwwalker 2012年

1
@Walkerneo:うん、間違いなく注目に値する。もちろん、JSライブラリを使用するthisと、必要に応じて参照するオブジェクトをオーバーライドできます。
リチャードターナー

@RichardTurnerコンテキストバインディングを変更するためにライブラリを使用する必要はありません。単純な.bind()呼び出しがそれを行います
Kloar

@Kloarはい、最近はできますが、MSIE9 +が必要です。私が答えたときはるかに一般的だった古いMSIEでは、ポリフィルが必要になります。
リチャードターナー

33

違いはありませんが、使用しないでください。

多くのブラウザーでは、window.onloadすべての画像が読み込まれるまでイベントはトリガーされません。標準ベースのブラウザには、DOMContentLoaded以前に発生すると呼ばれるイベントがありますが、IEではサポートされていません(この回答を書いている時点)。クロスブラウザーのDOMContentLoaded機能をサポートするJavaScriptライブラリーを使用するか、使用できるよく記述された関数を見つけることをお勧めします。jQueryの$(document).ready()は良い例です。


53
将来からの質問... jqueryがない場合はどうなりますか?
シド

54
現在からの質問.. jQueryが目前のプロジェクトに対して過剰である場合はどうなりますか?(jQueryをノックしないで、自分で使用してください。ライブラリから1つの機能のみを必要とする場合もあります。)
Bradmage 2012年

14
「IEでサポートされていません」と言うとき、それは普遍的な真実ですか、それともIEの特定のバージョンにのみ当てはまりますか?この回答を書いて以来、ブラウザの世界では多くの変化があったため、この回答を更新する時がきたのではないでしょうか?
ブライアンオークリー2013年

8
DOMContentLoadedがIE9以降でサポートされるようになりました:developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
Adam

6
未来からの報告、DOMContentLoadedは現在、すべての主要なブラウザでサポートされています。caniuse.com/#feat=domcontentloaded
ホセ・ゴメス・

21

window.onload体なしで働くことができます。スクリプトタグのみでページを作成し、ブラウザで開きます。ページには本文は含まれていませんが、引き続き機能します。

<script>
  function testSp()
  {
    alert("hit");
  }
  window.onload=testSp;
</script>

6
実際にコンテンツを追加する場合(bodyタグ内にある必要があります)、bodyタグのないHTMLは無効です。また、スクリプトタグにはタイプがありません。標準に準拠していないコードを修正するブラウザーに依存しないでください。(ブラウザーによって、過去または将来でブラウザーの動作が異なるか、まったく異なる場合があります。)
Kissaki

4
@Kissaki:標準HTMLではbodyタグはまったく必要ありません。
ロバートSiemer

5
xhtml1は<!ELEMENT html (head, body)>[1]を指定<!ELEMENT HTML O O (%html.content;)し、html401は<!ENTITY % html.content "HEAD, BODY">[2]も指定します。html51はA head element followed by a body element.、htmlコンテンツについても述べています。[3] w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict w3.org/TR/html51/semantics.html#the -html-element- 一般的で使用中のHTML標準にすべてbodyタグ必要だと思います。:)
キサキ2013年

1
@KissakiこれはHTMLではなくXHTMLです。HTMLでは、SGML DTDに従って、開始タグと終了タグの両方のタグの省略、およびhtmlタグとheadタグの省略が可能です。w3.org/TR/html401/struct/global.html#edef-BODY Start tag: optional, End tag: optional
OdraEncoded

1
@Kissaki:html5はスクリプトタイプを必要としません(javascriptの場合)。以前のバージョンに適しています。
マーク

10

私は、一般的に>イベントを使用しないことを好み<body onload=""ます。振る舞いをコンテンツからできるだけ離した方がきれいだと思います。

とは言っても、body onloadを使用すると速度がわずかに向上する場合があります(通常、私にはかなりまれです)。

私はプロトタイプを使用するのが好きなので、一般的<headに私のページの>に次のようなものを入れます:

document.observe("dom:loaded", function(){
  alert('The DOM is loaded!');
});

または

Event.observe(window, 'load', function(){
  alert('Window onload');
});

上記は私がここで学んだトリックです。HTMLの外部にイベントハンドラーをアタッチするという概念がとても好きです。

(コードのスペルミスを修正するために編集します。)


どのような場合にそれが速くなり、なぜですか?
Kissaki 2015年

この答えは、すべての「私」(「私が好む」、「私が思う」)では非常に主観的に見えます。それが客観的で検証可能な事実にさらに欠けている場合、それはその印象をかなりサポートします。
Kissaki 2015年

1
6年以上前に投稿されたことを考えると、私はこの答えを1粒の塩と考えます。あなたはそれを更新したり、独自の改善された答えを投稿したりして大歓迎です。
Mark Biek、2015年

7

客観的な質問に対する非常に多くの主観的な答え。「邪魔にならない」JavaScriptは、古い規則のように迷信を使用しないという迷信です。誰かの流行の宗教的信念に従ってではなく、確実に目標を達成できるようにコードを記述してください。

見つけた人:

 <body onload="body_onload();">

過度に注意をそらすことは過度に大げさで、優先順位がまっすぐではありません。

通常、JavaScriptコードを別の.jsファイルに入れますが、HTMLでイベントハンドラーをフックすることに煩わしいことはありません。


39
控えめなJavaScriptを作成するのには十分な理由があります。100ページのWebアプリがあり、すべてのページに含まれるJavaScriptファイルに配置するのではなく、<body onload = "body_onload();">メソッドを使用したとします。次に、何らかの理由でその関数の名前を変更する必要があると想像してください。含まれているJavaScriptファイルにイベントを入れると、1)変更が非常に簡単になります。2)同じリソースを何度も何度もダウンロードする代わりに、JavaScriptファイルを1年間(適切に構成されたサーバーに)キャッシュできるため、サーバーリソースを節約できます。
Andrew Ensley、2011

21
だから、なぜ何かが推奨されているのかわからないので、「流行の宗教的信念」というラベルを付けます。
12

6
問題は、「これらの2つの方法の違いは何ですか?」と、どちらの方法が推奨されるかという要求です。あなたの応答はその質問にどのように答えますか?
Richard Turner、

1
大量のファイルに適用できる1か所でモジュラーソリューションを作成する場合は、ファイルをファイル自体のそれぞれにコードを追加するよりもはるかに優れています。元のビルド時間、コード編成の目的、読みやすさ、および将来の編集に適しています。それはトレンディではありません。実際には、JavaやC ++などの言語に存在する古い概念であり、Webプログラマーは現在、はるかに優れたコーディング方法として採用しています。
神保ジョニー

1
最新のブラウザーでのXSS攻撃に対する優れた防御策の1つは、コンテンツセキュリティポリシーですべてのインラインJavaScriptを無効にすることです。これが、HTMLでonload属性を使用しないかなり良い理由です。
グレッグボール

4

window.onload-すべてのDOM、JSファイル、画像、iframe、拡張機能などが完全に読み込まれた後に呼び出されます。これは$(window).load(function(){});と同じです。

body onload=""-DOMが読み込まれると呼び出されます。これは$(document).ready(function(){});と同じです。


1
これを入手できる人はいますか?私は多くのフォーラムでこのステートメントを見てきましたが、仕様で定義されている場所へのリンクはありません。
crempp 2014年

1
@crempp body要素Global属性があるので、これは正しくありません。しかし、これは自分でテストできます。jsbin.com/ OmiViPAJ / 1 / editを参照してください。そこでは、本体のonloadイベントの前に画像のonloadイベントが発生していることがわかります。
オラフディーチェ2014年

2
この答えは他と矛盾しています。ソースを提供できますか?
Jimmy Breck-McKye 2014

2
api.jquery.com/ready jQueryドキュメントには、「。ready()メソッドは通常、<body onload = "">属性と互換性がありません」と記載されています。jQueryではbody.onload $(window).load(..)に近いと思いますが、それでもまだ違うと思います。
ccsakuweb 14

2
この回答は完全に間違っており、賛成票を投じるべきではありません。実際、この種の回答は、readyvs onloadイベントについての最大の誤解の1つとして一般的に引用されています。loadすべてのスクリプト、画像、スタイルシートを含むドキュメント全体が読み込まれた後に発生します。DOMContentLoadedDOMツリーが構築された後、画像などの前に起動します。DOMContentLoadedこれはdocument.ready、ではなくと同等loadです。
rism 2015年

2

違いはありません ...

したがって、主に両方を使用できます(一度に1つずつ!-)

しかし、読みやすさとHTMLコードの清潔さのために、私は常にwindow.onloadを好んでいます!o]


1

目立たないJSコードを記述しようとしている場合は(そうする必要があります)、を使用しないでください<body onload="">

異なるブラウザーがこれら2つをわずかに異なる方法で処理しますが、それらは同様に動作することは私の理解です。ほとんどのブラウザーでは、両方を定義すると、一方が無視されます。


1

onloadは他の属性と同じように考えてください。たとえば、入力ボックスに次のように配置できます。

<input id="test1" value="something"/>

またはあなたは電話することができます:

document.getElementById('test1').value = "somethingelse";

onload属性も同じように機能しますが、value属性のように文字列ではなく関数を値として使用します。これは、「そのうちの1つだけを使用できる」理由も説明しています。window.onloadを呼び出すと、bodyタグのonload属性の値が再割り当てされます。

また、ここで他の人が言っているように、通常、スタイルとJavaScriptをページのコンテンツから分離しておく方がきれいです。そのため、ほとんどの人はwindow.onloadなどのjQueryのready関数を使用することをお勧めします。


1

<body onload = "">はwindow.onloadをオーバーライドする必要があります。

<body onload = "">を使用すると、ブラウザーによってはdocument.body.onloadがnull、未定義、または関数になる可能性があります(ただし、getAttribute( "onload")は、匿名関数の本体を文字列として取得するためにある程度一貫している必要があります)。 。window.onloadを使用すると、それに関数を割り当てると、window.onloadはブラウザー間で一貫して関数になります。それが重要な場合は、window.onloadを使用してください。

とにかく、JSをコンテンツから分離するには、window.onloadが適しています。window.onloadを使用できる場合でも、<body onload = "">を使用する理由はそれほど多くありません。

Operaでは、window.onloadおよび<body onload = "">(さらにはwindow.addEventListener( "load"、func、false))のイベントターゲットは、SafariやFirefoxのようなドキュメントではなくウィンドウになります。ただし、「これ」は、ブラウザ間のウィンドウになります。

つまり、重要な場合は、クラッドをラップして一貫性を持たせるか、それを行うライブラリを使用する必要があります。


0

どちらも同じように機能します。ただし、両方が定義されている場合、どちらか一方のみが呼び出されることに注意してください。通常、どちらかを直接使用することは避けます。代わりに、イベントハンドラーをロードイベントにアタッチできます。このようにして、コールバックをonloadイベントにアタッチする必要がある他のJSパッケージをより簡単に組み込むことができます。

すべてのJSフレームワークには、イベントハンドラー用のクロスブラウザーメソッドがあります。


0

コンテンツ、レイアウト、動作を分離することは、標準として認められています。したがって、window.onload()は<body onload="">、両方が同じ作業を行うよりも、使用するのに適しています。


0

さらに3年間眠った後、このスレッドが再び生まれ変わって申し訳ありませんが、多分私はようやくwindow.onload=fn1;overの明白な利点を見つけました<body onload="fn1()">。これは、関係するJSモジュールまたはESモジュールをお使いのとき:onload「古典」JSファイル(つまり、そのハンドラが存在なしでは言及<script type="module" … >、いずれかの方法が可能であり、あなたのとき、onload「モジュール」JSファイル(つまり、そのハンドラが存在するが、と呼ばれ<script type="module" … ><body onload="fn1()">FN1」で失敗します()is not defined "エラー。理由はおそらく、HTMLが解析される前にESモジュールがロードされないためです…しかし、それは単なる私の推測です。とにかく、window.onload=fn1;モジュールで完全に動作します...

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.