ページが読み込まれたときに関数を実行するにはどうすればよいですか？

246

ページが読み込まれたときに関数を実行したいのですが、<body>タグで使用したくありません。

次のように、で初期化すると実行されるスクリプトがあります<body>。

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

しかし<body onload="codeAddress()">、私はそれなしで実行したいと思っています、そして私は多くのことを試みました、例えばこれ：

window.onload = codeAddress;

しかし、それは機能していません。

それで、ページが読み込まれたときにどのように実行しますか？

javascript html onload

— クレス・グスタフソン
ソース

定義されたwindow.onload = codeAddress後に実行していますcodeAddress()か？もしそうなら、これはうまくいくはずです。他にエラーがないと確信していますか？

— Skilldrick 2011年

これは意味がありません。window.onloadはページのロード後に実行され、すべてのJavaScriptが利用可能であるため、codeAddress（）関数は、ページまたはリンクされたjsファイル内の任意の場所で宣言できます。ページの読み込み中に呼び出されない限り、前に来る必要はありません。

— Jared Farrish 2011年

@Jaredはい、あります。見ていjsfiddle.net/HZHmcを。動かない。しかし、window.onloadをjsfiddle.net/HZHmc/1の定義の後に移動すると機能します。

— Skilldrick 2011年

関数宣言は通常、スコープの最上部まで引き上げられるため、関数はアクセス可能なスコープ内のどこにでも宣言できます。

— Russ Cam

4

すべての一般的なブラウザがJavaScriptエラーを表示する可能性があります。

— クリストフ

354

window.onload = codeAddress;動作するはずです- ここにデモがあります、そして完全なコード：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        window.onload = codeAddress;
        </script>
    </head>
    <body>
    
    </body>
</html>

スニペットを展開

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        
        </script>
    </head>
    <body onload="codeAddress();">
    
    </body>
</html>

スニペットを展開

— ダリン・ディミトロフ
ソース

3

私の回答で述べたように、コードには問題はありません。コードが機能しない理由は、JSのどこかにエラーがあるはずです。

— Skilldrick 2011年

本文にテキストを含む段落を挿入すると、[OK]をクリックするまで読み込まれません。

— FluorescentGreen5

このグローバルイベントハンドラはChromeでのみ使用できます。 developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/...

— Devappended

177

ネイティブJavaScriptは、jQueryやwindow.onloadを使用する代わりに、jQueryのリリース以降、いくつかの優れた関数を採用しています。最近のすべてのブラウザーは、jQueryライブラリーを使用せずに独自のDOM対応機能を備えています。

ネイティブJavaScriptを使用している場合は、これをお勧めします。

document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);

— スペンサーメイ
ソース

4

（初心者向けの質問：何をしfalseますか？）

— ᔕᖺᘎᕊ2015

7

@ᔕᖺᘎᕊ「bubbles」プロパティ（含める必要はありません。すべてのブール値を入力して、習慣を整えます）。「キャンセル可能」プロパティには別のブール文もありますが、上記の文はすでにキャンセルできないため、あまり役に立ちません。詳しくは、developer.mozilla.org

— Spencer May

1

これは私が今探していたものです:) DOMが完了したときに実行されるため、ブラウザが「ページが完全に読み込まれた」と言ったときではなく、外部のもの（広告など）に基づいて数秒かかることがあります。

— ナサニエル2017年

少しnoobの質問です。ページがロードされているかどうかがわからない場合はどうすればよいでしょうか。編集：Ah：document.readyState

— Brian Hannay 2017

1

@ x-yuri「DOMContentLoadedイベントは、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに、ドキュメントが完全に読み込まれて解析されたときに発生します（loadイベントは、完全に読み込まれたページを検出するために使用できます）。」- stackoverflow.com/questions/2414750/...

— スペンサー月

46

Darinの答えをとりましたが、jQueryスタイルです。（ユーザーがJavaScriptを要求したことを知っています）。

実行中のバイオリン

$(document).ready ( function(){
   alert('ok');
});

— ジョーズで食べる
ソース

4

あなたの答えは私にすべてを教えましたが、jQuery / javascriptについては教えませんでした。

— unicorn2

2

@VijayKumarこれはjQueryであり、ネイティブJavaScriptではありません。そのため、jQueryライブラリが含まれている必要があります

— Spencer May

30

代替ソリューション。私は、簡潔さとコードの単純さのためにこれを好みます。

(function () {
    alert("I am here");
})();

これは、名前が指定されていない無名関数です。ここで何が起こるかというと、関数が一緒に定義されて実行されるということです。ページをロードする前に実行するか、すべてのHTML要素をロードした直後に実行するかに応じて、これを本文の最初または最後に追加します。

— ハビーブ
ソース

1

：これはGitHubのためのHTMLプレビューで動作することを唯一のコードですhtmlpreview.github.io その他のコード、正しいながらは、このHTMLプレビューによって台無しにされています。

— Jason Doucette

1

これが、HTMLページの最後にスクリプトタグを配置することと、無名関数の目的との違いを誰かが説明できますか？

— Pat-Laugh、

10

window.onload = function() { ...などは良い答えではありません。

これはおそらく機能しますが、すでにそのイベントにフックしている他の関数も壊します。または、別の関数があなたの後にそのイベントにフックすると、それはあなたのものを壊します。そのため、何時間も費やして、機能していたものが機能しなくなった理由を解明することができます。

ここでより堅牢な答え：

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

私が使用していたコードのいくつかは、著者の信用を与えるためにどこで見つけたのか忘れてしまいました。

function my_function() {
    // whatever code I want to run after page load
}
if (window.attachEvent) {window.attachEvent('onload', my_function);}
else if (window.addEventListener) {window.addEventListener('load', my_function, false);}
else {document.addEventListener('load', my_function, false);}

お役に立てれば：）

— 意志
ソース

onload使用状況に関する追加の洞察を提供してくれてありがとう

— CybeX

4

トライreadystatechange

document.addEventListener('readystatechange', () => {    
  if (document.readyState == 'complete') codeAddress();
});

状態は次のとおりです。

loading-ドキュメントは読み込まれています（スニペットでは起動されません）
インタラクティブ -ドキュメントは解析され、前に起動されますDOMContentLoaded
complete-ドキュメントとリソースがロードされ、前に起動されますwindow.onload

コードスニペットを表示

<script>
  document.addEventListener("DOMContentLoaded", () => {
    mydiv.innerHTML += `DOMContentLoaded (timestamp: ${Date.now()})</br>`;
  });
  
  window.onload = () => {
    mydiv.innerHTML += `window.onload (timestamp: ${Date.now()}) </br>` ;
  } ;

  document.addEventListener('readystatechange', () => {
    mydiv.innerHTML += `ReadyState: ${document.readyState}  (timestamp: ${Date.now()})</br>`;
    
    if (document.readyState == 'complete') codeAddress();
  });

  function codeAddress() {
    mydiv.style.color = 'red';
  }
</script>

<div id='mydiv'></div>

スニペットを展開

— カミル・キエチェフスキー
ソース

3

DOMが読み込まれたときに実行される複数の関数の設定を可能にするdomReadyスクリプトを見てください。これは基本的に、多くの一般的なJavaScriptライブラリでDom readyが行うことですが、軽量であり、外部スクリプトファイルの先頭で取得および追加できます。

使用例

// add reference to domReady script or place 
// contents of script before here

function codeAddress() {

}

domReady(codeAddress);

— ラスカム
ソース

0

window.onloadは次のように機能します。

function codeAddress() {
	document.getElementById("test").innerHTML=Date();
}
window.onload = codeAddress;

<!DOCTYPE html>
<html>
<head>
	<title>learning java script</title>
	<script src="custom.js"></script>
</head>
<body>
	<p id="test"></p>
	<li>abcd</li>
</body>
</html>

スニペットを展開

— ルドラ
ソース