1

本文内のスクリプトから、jquery と SimpleModal をページ ヘッダーに動的に読み込みます。コールバックを使用して、呼び出しを行う前にjQueryが完全にロードされていることを確認します-これは機能します。ただし、SimpleModal スクリプト ファイルを動的にロードすると、後でそのメソッドを呼び出すことができません。SimpleModal スクリプトが遅延ロードされ、現在のドキュメント オブジェクトを参照できない場合に表示されます。どんな助けでも大歓迎です。

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    jQuery = window.jQuery.noConflict(true);

    main();
}

/******** Main function ********/
function main() {
    jQuery(document).ready(function ($) {
        var domain = 'http://qo.microssoftware.com';

        /******* Load SimpleModal *******/
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src",
        domain + "/js/simplemodal.js");
        script_tag.onload = modalLoadHandler;
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);

    });
}

function modalLoadHandler() {
    /******* Open Modal *******/
    $.modal("<div><h1>SimpleModal</h1></div>", {});
}
4

3 に答える 3

1

試す：

<script type="text/javascript" src="http://qo.microssoftware.com/js/simplemodal.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
    $.modal("<div><h1>SimpleModal</h1></div>");
});
</script>

または、main() 関数を使用してモーダルを呼び出したい場合:

<script type="text/javascript" src="http://qo.microssoftware.com/js/simplemodal.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
    function main() {
        $.modal("<div><h1>SimpleModal</h1></div>");
    }
});
</script>

ヘッダーに js を入れる必要はありません... 実際、一部のプログラマーは、すべての JS を常に終了 BODY タグの直前に置きます。

于 2012-09-15T00:50:28.837 に答える
0

onloadこれは、スクリプトのイベントに基づいて async-closure を作成する場所です。

onreadystatechange古い IE をサポートする必要がある場合は、AJAX リクエスト (純粋な JS) で行うのと同じ方法で、イベントにフックすることもできます。最新のブラウザーでは、このイベントは発生しません。

そのため、onload をコールバックに変えて、ファイルから既知のメソッドを起動します。onerrorスクリプトの読み込みの にもアタッチすることで、エラーを回避できます。

于 2012-09-15T01:09:06.760 に答える
0

そもそもこれは不必要だと思います。simplemodal スクリプトは非常にコンパクトです。この種の ajax メソッドの不必要な複雑さなしに、一般的なスクリプトの読み込みを最適化する方法 (gzip、または ajax を使用する必要がある場合は、RequireJS を使用した AMD 依存関係の読み込みなど) をさらに検討してください。

このタイプのメソッド (Facebook SDK や Google マップなど) を使用するスクリプト ローダーは、スクリプトが初期化されると、呼び出すコールバックのウィンドウ (グローバル) 要素を検索します。基本的に、simplemodal コードを変更してから、依存するコードをコールバックでラップする必要があります。この場合、それがどのように必要になるかはほとんどわかりません。

于 2012-09-15T00:50:13.850 に答える