ページの読み込み時にJavaScript関数を呼び出すにはどうすればよいですか？

244

従来、ページが読み込まれた後にJavaScript関数を呼び出すには、JavaScript onloadのビットを含む本文に属性を追加します（通常は関数のみを呼び出します）。

<body onload="foo()">

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

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

javascript onload

— palAlaa
ソース

15

ところで：それはJavascriptです。Javaは言語であり、Javascriptは別のものです。Javaスクリプトなどはありません。FYI

— Yanick Rochon、

質問に対するケビンの編集がまだ同じ質問をしていることを確認できますか、それとも私たちが理解できるように言い換えることができますか？（onloadに代わるものを見つけようとしていますか？）

— STW

388

onloadメソッドがパラメータを取得するようにしたい場合は、次のようなことができます。

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

これにより、onloadが匿名関数にバインドされ、呼び出されたときに、指定したパラメーターを使用して目的の関数が実行されます。そしてもちろん、無名関数の内部から複数の関数を実行できます。

— マット・シーカー
ソース

そして、サーバーで生成されたページを動的にインクルードし、DOM対応が必要になったとき、この地雷原に取り組む必要があります。誰かだけが以前に適切にライブラリー・ユーザーを奨励したとしたら。

— Stefan Kendall、

4

いい考えだとは言わなかった。私が働いている主任開発者はNot Invented Here症候群の強いケースを持っていますが、私は彼にいくつかのページの外でjqueryを使用するように説得することができませんでした。

— Matt Sieker、

2

次に、ジョブを切り替える必要があります。仕事に適したツールが、使用しているツールではない場合、なぜ無能な人と常に壁に頭をぶつけ合いますか？

— Stefan Kendall

また、ボタンのonclickイベントを使用して同じyourfunctionを2回呼び出すことはできますか？

— Faizan 2013年

73

これを行う別の方法は、イベントリスナーを使用することです。

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

説明：

DOMContentLoadedこれは、ドキュメントのDOMオブジェクトが完全に読み込まれ、JavaScriptで表示されたときに、「クリック」、「フォーカス」されている可能性があることを意味します...

function（）匿名関数。イベントが発生すると呼び出されます。

— アーメド・ジョラニ
ソース

5

これはIE 8以下では機能しないことに注意してください。それ以外の場合、これは最高の純粋なJSソリューションです。

— フィリップ

46

あなたの元の質問は不明瞭で、ケビンの編集/解釈が正しいと仮定すると、この最初のオプションは適用されません

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

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

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

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

そして、別のオプションは、本質的にこれを行うJSフレームワークの使用を検討することです：

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

— STW
ソース

javascript:中にはonload有害ではないとはいえ、不要です。

— icktoofay 2013年

@STW <script type="text/javascript">LoadResult();</script>が与えるUncaught ReferenceError: LoadResult is not defined

— Gunasegar 2015年

37

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

window.onload = yourfunction;

または、jQueryを使用する場合：

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

ページの読み込み時に複数の関数を呼び出す場合は、この記事で詳細を確認してください。

複数のJavaScriptオンロード関数の使用

— サルフラズ
ソース

3

これは不正解です。関数は実行され、onloadに返されるものをすべて割り当てます。（）があってはなりません。

— epascarello、

1

onloadイベントをリッスンしている他の関数がある場合、これはそれらを吹き飛ばします。イベントハンドラーを直接割り当てるよりも、イベントリスナーを追加する方が適切です。この場合でも、あなたはそれをあなたが持っている方法ではなく、関数クロージャーなしで `window.onload = yourfunction 'として割り当てます。あなたの方法は、割り当て時にyourfunction（）を実行しようとします。

— Robusto

これにより、関数の戻り値がwindow.onloadに割り当てられます。これは、戻り値が関数でない限り機能しません。

— I.devries

@epascarello：関数名を記述する際に、問題が修正されました。ありがとう

— Sarfraz

1

window.onload = yourfunction; この方法の問題は、機能パラメーターを受け入れないことです!!

— palAlaa 2010年

8

<!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>

スニペットを展開

— 匿名の
ソース

3

スクリプトがヘッドタグに配置されているため、本文のコンテンツの前にスクリプトを実行できるようになっているので、彼の答えは明らかだと思います。または、その機能などをプリロードするとします。まったくわかりませんが、誰かがあなたにスプーンで餌をあげたり、このコミュニティの誰もがそうしたりすることは決してないので、自分でもう少し調べなければなりません。＃especially_that_you're_a_web_developer

— M03 '22

8

ロード時に呼び出す関数（つまり、ドキュメント/ページのロード）を呼び出す必要があります。たとえば、ドキュメントまたはページの読み込みが「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>

— Amir Md Amiruzzaman
ソース

6

ここにトリックがあります（どこでも動作します）：

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

— アビシェク
ソース

1

DOMに挿入された（サーバーから）読み込まれたhtmlを検出するMutationObserverか、データが使用できるようになったときにloadContent関数で瞬間を検出します

コードスニペットを表示

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


// TEST: simulate element loading
let 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>

スニペットを展開

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