2011-12-07 17 views
2

JavaScriptを初めて使用しています。イベントが発生したときにわかります。ここに状況があります。私はASP.Netアプリケーションを作成しています。私のコードでは、Page_Load()にいくつかのコードがあります。私はこのコードを最初に実行する必要があります。このコードの実行が終了したら、JavaScriptを実行する必要があります。ページがロードされた後でJavascriptを実行する

このような順序でコードが実行されることを保証するイベントが存在しますか?

答えて

8

最も簡単な方法は、あなたもあなたの体の非常に最後でいくつかのスクリプトを置くことができ、

<body onload="yourFunction()"> 

function yourFunction() { 
} 

また、あなたの体のonloadイベントにあなたの関数呼び出しを追加することです。本文が処理された後、ここにあるスクリプトはすべて実行されます。

var divElement = document.getElementById("divId"); 

などのような操作を行うことができます。

$(document).ready(function() { 
    //dom is ready 
}); 

以上単に:

私はjQueryのは、あなたの質問にタグ付けされ表示されませんでした、しかし、あなたがそれを使用することが起こるならば、あなたもこれを行うことができます

EDIT

$(function() { 
    //dom is ready 
}); 
+0

完全に機能しました。ありがとう! – user489041

+0

私は通常このようなインラインJavaScriptを推奨しません。私は実際には、最も簡単な選択肢は、本文にスクリプトを含めることだと思います。 jQueryを使用している場合は、この方法で使用することは理にかなっていますが、この機能のためにプロジェクトにjQueryを含めることはありません。あなたはまた、一般的に悪い考えであるグローバル関数を宣言しました。 –

+0

@ me232 - 'body onload = 'foo()''は、DOMレベル0のハンドラが通常許容されていた数少ない(唯一の)場所の1つだと思いました。 –

1

私はあなたがASPページのライフサイクルを少し混乱させるかもしれないと思います。

ページが作成されるたびに、サーバー側(VB/C#)コードのすべてのイベントが発生します(ユーザーがトリガーしたイベントを除く)。したがってInit、Load、PreRender、Render、Unloadなど...ページがビルドされた後でのみ、ワイヤーをブラウザに送ります。ブラウザがそれを保持したらを入力して JavaScriptを実行することができます。

アダムの示唆している方法はこれを行う方法の1つです。

1

サーバ側スクリプトは、クライアント側のスクリプトの前に常に実行されます。

ページ上のすべて(DOMContent-wise)が作成された後にJavascriptが実行されるようにするには、いくつかのオプションがあります。 スクリプトをタグの一番下に追加できます。ページの下部にあるスクリプトは、ページの読み込み速度が向上し、パフォーマンスが重要であると認識するため、これは実際には良い方法です。

アダムは言ったように、window.onload = function(){}やwindow.addEventListener( "load"、function(){}、true)などのイベントハンドラを使用することもできます。 代わりに、 "load"の代わりに "DOMContentLoaded"を使用します。これは、HTMLファイルのテキスト部分全体がロードされると(すべてのイメージなどがロードされるのを待つのではなく)実行されます。ただし、スクリプトをページの最下部に置くと、これは不要になります。

ここに、htmlファイルの例を示します。スタイルシートは一番上に定義され、スクリプトは一番下に定義されています。

3

ボディがロードされ、順番に実行されると、ボディに含まれるスクリプトが実行されます。これは、ページがロードされた後にスクリプトがロードされるようにするクロスブラウザソリューションとして使用できます。

<!DOCTYPE html> 
<html> 
<head> 
    <!-- scripts loaded in unknown order in some browsers --> 
    <script type="text/javascript" src="headscript.js"></script> 
</head> 
<body> 

    <!-- scripts included on body execute in order when the DOM is ready --> 
    <script type="text/javascript"> 
     (function() { 
      // do what you want here without trashing global scope 
      // you should probably include this as an external script 
     }()); 
    </script> 
</body> 
</html> 
+1

グローバルスコープを完全にきれいに保つための+1 –

1

はい、行くには、いくつかの方法があります。

$(window).ready(function() 
{ 
    //Your code goes here 
}); 

b。

$(document).ready(function() 
{ 
    //Your code goes here 
}); 

cです。

window.onload = function() 
{ 
    //Your code goes here 
} 
関連する問題