JavaScriptのロード順序

StackOverflow https://stackoverflow.com/questions/19035

質問

私は両方で働いています amq.js (ActiveMQ) および グーグルマップ. 。この順序でスクリプトをロードします

<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>AMQ & Maps Demo</title>

    <!-- Stylesheet -->
    <link rel="stylesheet" type="text/css" href="style.css"></link>

    <!-- Google APIs -->
    <script type="text/javascript" src="http://www.google.com/jsapi?key=abcdefg"></script>

    <!-- Active MQ -->
    <script type="text/javascript" src="amq/amq.js"></script>
    <script type="text/javascript">amq.uri='amq';</script>

    <!-- Application -->
    <script type="text/javascript" src="application.js"></script>
</head>

ただし、私の application.js ではマップは正常に読み込まれますが、AMQ でトピックをサブスクライブしようとするとエラーが発生します。AMQ は、Firefox のエラー コンソールにオブジェクトが定義されていないと表示されるプロトタイプに依存しています。スクリプトの読み込みが完了する前に amq オブジェクトを使用することに問題があると思います。 application.js で使用する前に、両方のスクリプトが読み込まれることを確認する方法はありますか?

Googleにはこの素晴らしい関数呼び出しがあります google.setOnLoadCallback(initialize); それはとてもうまくいきます。amq.js にこのようなものがあるかどうかはわかりません。

役に立ちましたか？

解決

application.js で使用する前に、両方のスクリプトが読み込まれることを確認する方法はありますか?

JavaScript ファイルは順番に読み込まれる必要があります そしてブロックする したがって、依存しているスクリプトが何か異常なことを行っていない限り、他のファイルの後に application.js をロードするだけで済みます。

ノンブロッキング JavaScript ダウンロード には、スクリプトがどのように読み込まれるかについての情報が含まれています (また、ブロックを無効にするためのいくつかのテクニックについても説明しています)。

他のヒント

クロスドメイン スクリプトはサイト自体のスクリプトの後に読み込まれるため、エラーが発生します。興味深いことに、ここでは誰もこれを知りません。

jQueryでは以下を使用できます: 

$(document).ready(function(){/*do stuff here*/});

これにより、作業を行う前に JavaScript がロードされ、DOM の準備ができていることが確認されます。

プロトタイプではこれはうまくいくように見えます

document.observe("dom:loaded", function() {/*do stuff here*/});

私があなたの問題を正しく理解していれば...それは役立つかもしれないと思います..

これを行うためにライブラリに依存したくない場合は...これはうまくいくかもしれないと思います:

<script>
   function doIt() {/*do stuff here*/}
</script>
<body onLoad="doIt();"></body>

単一のスクリプトでのみ、これと同様の問題が発生しました。私が思いついた解決策は、使用することでした addEventListener("load",fn,false) に script を使用して作成されたオブジェクト document.createElement('script') これは、標準の JS ファイルをロードし、「ロード後」スクリプトを追加できる最後の関数です。

function addJavaScript( js, onload ) {
   var head, ref;
   head = document.getElementsByTagName('head')[0];
   if (!head) { return; }
   script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = js;
   script.addEventListener( "load", onload, false );
   head.appendChild(script);
}

これが将来誰かの役に立つことを願っています。

使用する前に両方のスクリプトがロードされていることを確認する方法はありますか?

はい。

ロードしたいコードを最後に置きます（ application.js のもの）をプロトタイプに入れる 文書.観察. 。これにより、プロトタイプとその他のものが完了して準備ができた後にのみコードが読み込まれることが保証されます。(jQuery に精通している場合、この関数は jQuery の $(document).ready )

AMQ は、FireFox のエラー コンソールにオブジェクトが定義されていないと表示されるプロトタイプに依存しています。

AMQ が依存しているということですか? プロトタイプライブラリ?提供されたコードにはそのライブラリのインポートが見つかりません。

AMQがプロトタイプライブラリに依存するということですか？あなたが提供したコードにそのライブラリのインポートが表示されません。

ActiveMQ の JavaScript (amq.js) はプロトタイプに依存します。amq.js では、_amq.js、behaviour.js、prototype.js の 3 つのスクリプトを読み込みます。

JavaScript のロードオーダー wrumsby についてご協力いただきありがとうございます。これは、私のバグが別の城にあることを示しています:(

別の問題があると思います。ActiveMQ 5.0 から 5.1 までの js ファイルもチェックしましたが、同様に同じであることがわかりました。5.0 から 5.1 では何かが変更され、サブスクライブするトピックを更新する必要があります。引き続き調査していきますが、考えられる原因を排除していただきありがとうございます。

SharePoint の組み込み JavaScript メソッドを使用して、スクリプトの実行を制御することもできます。

_spBodyOnLoadFunctionNames.push("yourFunction");
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top