web-dev-qa-db-ja.com

ページがロードされたときに関数を実行する方法

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

このように<body>で初期化した場合に実行されるスクリプトがあります。

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

しかし、私は<body onload="codeAddress()">を使わずにそれを実行したいのです。この：

window.onload = codeAddress;

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

それでは、ページが読み込まれたときにどうやってそれを実行するのですか？

javascripthtmlonload
207
Claes Gustavsson

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>
315
Darin Dimitrov

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

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

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

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

ランニングフィドル

$(document).ready ( function(){
   alert('ok');
});​
39
Eat at Joes

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

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

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

17
Habeeb

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);}

お役に立てれば ：）

8
Will

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

使用例

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

function codeAddress() {

}

domReady(codeAddress);
3
Russ Cam

readystatechange を試してください

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

状態は次のとおりです。

  • loading - ドキュメントを読み込んでいます（スニペットでは起動しません）
  • interactive - ドキュメントは解析され、DOMContentLoadedの前に起動されます。
  • complete - ドキュメントとリソースがロードされ、window.onloadより前に起動されます。
<script>
  document.addEventListener("DOMContentLoaded", () => {
    mydiv.innerHTML += 'DOMContentLoaded' + '</br>';
  });
  
  window.onload = () => {
    mydiv.innerHTML += 'window.onload' + '</br>';
  } ;

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

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

<div id='mydiv'></div>
0
Kamil Kiełczewski

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>
0
Rudra