web-dev-qa-db-ja.com

ページロード時にJavaScript関数を呼び出す方法

伝統的に、ページがロードされた後にJavaScript関数を呼び出すには、JavaScriptを少し含む本体にonload属性を追加します（通常は関数を呼び出すだけです）

<body onload="foo()">

ページが読み込まれたら、JavaScriptコードを実行してページの一部にサーバーからのデータを動的に追加します。属性を追加できるonload要素がないJSPフラグメントを使用しているため、body属性を使用できません。

ロード時にJavaScript関数を呼び出す他の方法はありますか？私はjQueryをあまり使い慣れていないので、むしろjQueryを使用しない方がよいでしょう。

javascriptonload
188
palAlaa

Onloadメソッドにパラメータを取らせたい場合は、次のようにします。

window.onload = function() {
  yourFunction(param1, param2);
};

これはonloadを無名関数にバインドします。無名関数は、呼び出されると、指定したパラメータを使用して、希望の関数を実行します。そしてもちろん、無名関数の中から複数の関数を実行することもできます。

318
Matt Sieker

これを行うもう1つの方法は、イベントリスナーを使用することです。ここでは、それらの使用方法を示します。

document.addEventListener("DOMContentLoaded", function() {
  you_function(...);
});

説明：

DOMContentLoaded それは、ドキュメントのDOMオブジェクトが完全にロードされてJavaScriptで表示されていることを意味します。

function（） /無名関数。イベントが発生したときに呼び出されます。

54
Ahmed Jolani
function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

または、jQueryを使用したい場合は、

$(function(){
   yourfunction();
});

ページの読み込み時に複数の関数を呼び出したい場合は、この記事を参照してください。

32
Sarfraz

Kevinの編集/解釈が正しいと仮定した場合の最初の質問は不明であり、この最初のオプションは適用されません

典型的なオプションはonloadイベントを使うことです：

<body onload="javascript:SomeFunction()">
....

また、JavaScriptを本文の最後に配置することもできます。ドキュメントが完成するまで実行されません。

<body>
  ...
  <script type="text/javascript">
    SomeFunction();
  </script>
</body>

そして別の選択肢は、これを本質的に行うJSフレームワークの使用を検討することです。

// jQuery
$(document).ready( function () {
  SomeFunction();
});
31
STW

あなたは、ロード時に呼び出したい関数（つまり、ドキュメント/ページのロード）を呼び出す必要があります。例えば、文書またはページのロード時にロードしたい関数は "yourFunction"です。これは、文書のロードイベントで関数を呼び出すことによって実行できます。詳細は下記のコードをご覧ください。

以下のコードを試してください。

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        yourFunction();
    });
    function yourFunction(){
      //some code
    }
</script>
6
Amir Md Amiruzzaman

これがトリックです（至る所で動作します）：

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
5
Abhishek
<!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>
5
anonymous

DOMに挿入された（サーバーから）読み込まれたHTMLを検出するには、MutationObserverを使用するか、データが使用可能になったときにloadContent関数でモーメントを検出します。

var ignoreFirstChange=0;
var observer = (new MutationObserver((m, ob)=>
{
  if(ignoreFirstChange++ > 0) {
    console.log('Element added on', new Date());
  }
}
)).observe(content, {childList: true, subtree:true });


// simulate element loading
var tmp=1;
function loadContent(name) {  
  setTimeout(()=>{
    console.log(`Element ${name} loaded`)
    content.innerHTML += `<div>My name is ${name}</div>`; 
  },1500*tmp++)
}; 

loadContent('Senna');
loadContent('Anna');
loadContent('John');
<div id="content"><div>
0
Kamil Kiełczewski