2

基本的なjQueryを使用して、ページを完全にリロードするのではなく、AJAXを介してコンテンツを置き換えることでサイトを高速化しています( Turbolinksと同様):

$("nav").delegate("a", "click", function() {
    href = $(this).attr('href');
    history.pushState(null, null, href);
    $('#main').load(href + " #main");
    return false;
});

しかし、私が抱えている問題は、私の/portfolioページの相対リンクが失敗することです。たとえば、 は に<img src="website.jpg">ありますが、 がを探しているため/portfolio/website.jpg404 がスローされます。.load()/website.jpg

画像パスを絶対パスにするとうまくいくことはわかっていますが、これを JavaScript で修正する方法はありますか? そして、なぜjQueryはこれを処理しないのですか? 相対リンクは悪い習慣ですか?

4

1 に答える 1

10

jQueryではありません。loadリソースを読み込んでいます。ただし、そのHTMLは現在のドキュメントに配置されるため、その HTML 内のすべてのリンクは、読み込んだ URL に対してではなく、現在のドキュメントに対して解決されます。

これらのルート相対パスを作成するか、 を使用getして HTML を取得し、自分で前処理する必要があります。

試したことはありませんが、 baseelementで遊んで、実行する前に動的に追加しload(読み込み中の から派生した適切なベース URLhrefを使用)、読み込みが完了したら削除することができます。

編集：うん、base作品を使って：

$("nav").delegate("a", "click", function() {
    // *** Added var to next line
    var href = $(this).attr('href');
    // *** Added base
    var base = $('<base href="' + href + '">');
    // *** Put base in head
    $("head").append(base);
    history.pushState(null, null, href);
    $('#main').contents().hide();
    $('#main').load(href + " #main", function() {
        // *** Remove base; I *think* at this point it's already
        // been used (worked in my test, anyway)
        base.remove();
    });
    return false;
});

変数のvar前にa を追加したことに注意してください。The Horror of Implicit Globals のhref餌食になっているように見えました。

于 2013-07-26T17:18:32.050 に答える