0

同じヘッダーとフッターのページがいくつかあります。jQueryロード関数を-として使用したい

$("#header").load("template.html  #template_h1");   
$("#footer").load("template.html  #template_f1");

私の問題：

  • これらのページには、一部のスパンタグを新しい形式に変換するonload関数を備えたスクリプトがすでに含まれています。
  • 私のヘッダーとフッターは、変換する必要があるこのスパンタグを使用します。
  • 含まれているスクリプトを変更できません。
  • load()onload関数の前に関数を実行したい。

私はそれらを実行しようとしました$(document).ready(function()が、手遅れです。header\footerのスパンタグは変換されません。

どのイベントを使用できますか？

4

3 に答える 3

2

.load()は非同期であるため、呼び出しをどれだけ早く行っても、要素が時間内にロードされることに依存することはできません。同期をとる必要があります.load()（つまり、リクエストが完了するまでページをブロックする）が、それはひどい考えです。

これは、IMOのテンプレートを作成するための良い方法ではありません。また、ページが正しく表示される前に2つのリクエストを完了する必要があるため、ページの読み込みが大幅に遅くなる可能性があります。

可能であれば、サーバー側からこれらのテンプレートパーツを含めます。

于 2013-01-15T10:01:33.207 に答える
2

おそらく、onload関数の参照を保持し、作業を行ってから、元のonload関数を実行することができます。これをbodyタグのすぐ内側に配置するか、最初のオンロードを生成するスクリプトの後にスクリプトとして含めると、期待どおりに機能するはずです。 

var oldOnLoad = window.onload;

window.onload = function() {
   oldOnLoad();
}

編集oldOnLoad明確にするために、ヘッダーとフッターがダウンロードされた後に呼び出す必要があります。

var oldOnLoad = window.onload;
var headerComplete = false, footerComplete = false;

var callOldOnLoad = function() {
    if (headerComplete && footerComplete) {
        oldOnLoad();
    }
}

window.onload = function() {
    $("#header").load("template.html  #template_h1", function() {
        headerComplete = true;
        callOldOnLoad();
    });   
   $("#footer").load("template.html  #template_f1", function() {
        footerComplete = true;
        callOldOnLoad();
    });
}

これはテストしていませんが、を呼び出す前にDOMが更新されないという問題が発生する可能性がありますoldOnLoad。したがって、それをsetTimeoutに入れる必要があるかもしれません。

setTimeout(function() {oldOnLoad();}, 0);
于 2013-01-15T10:11:22.467 に答える
-1

HTMLで要素と要素<body>を定義した直後にコードを配置するだけです。headerfooter

例：

<body>
    <div id="header">Foo</div>

    <script type="text/javascript">
        $("#header").load("template.html  #template_h1");
    </script>

    <!-- Other Content -->

    <div id="footer">Bar</div>

    <script type="text/javascript">
        $("#footer").load("template.html  #template_f1");
    </script>
</body>

また、ファイルの最後にCSSインクルードを配置して、コードの後に​​CSSをロードすることもできます。

于 2013-01-15T10:01:02.877 に答える