2

私は自分のプロジェクトに取り組んできました- 完全な (重要な) JavaScript はここにあります。ユーザーがブラウザの前と次のボタンを使用してナビゲートできるように、 history.jsを含めたいと考えています。また、生成された URL が存在しなくてもアクセスできるようにしたいと考えています。これらの URL は履歴 API によって生成されるため、HTML ドキュメントにはリンクされません。

私がすでに行ったこと

プラグインのAPI Exposed セクションを見て、Mozilla のドキュメントを読んで、これを機能させることができました。

  • インターフェイスの次、前、およびベース リンクを使用してナビゲートするときに、URL が正しい
  • インターフェイスの次、前、および基本リンクを使用してナビゲートするときにタイトルが正しい

このための (簡略化された) コードは次のとおりです。

    document.title = $(".parentSection.base").data("title");


// Going forward
    var nextClick = $("a.next_link");

    nextClick.click(function(d) {       
        var nUrl = parentSection.next().data("url");
        History.pushState(null, null, nUrl) ;
        document.title = parentSection.next().data("title");

        d.preventDefault();
    });


// Going backwards
    var prevClick = $("a.prev_link");

    prevClick.click(function(e) {       
        var pUrl = parentSection.prev().data("url");
        History.pushState(null, null, pUrl) ;
        document.title = parentSection.prev().data("title");

        e.preventDefault();
    });


// Going to "Base" position
    var baseClick = $("a.base_link");

    baseClick.click(function(f) {           
        var bUrl = $(".parentSection.base").data("url");
        History.pushState(null, null, bUrl);
        document.title = $(".parentSection.base").data("title");

        f.preventDefault();
    });

これは正常に機能します。

やり遂げられそうにないこと

これは非常にうまく機能しますが、最終的な機能がなければ役に立ちません:

  • URL が生成されるようになりましたが (例:など) /lamp、/deskユーザーがこれらのリンクのいずれかに直接アクセスすると (または単にページをリロードすると)、URL が存在しないというメッセージが表示されます。
  • ブラウザーのナビゲーション ボタンはクリック可能ですが (それに応じて URL が変更されます)、コンテンツはまったく変更されません。

誰でもこれについてフィードバックをいただけますか? 腰が痛いほど長い間これに取り組んでいます。

私はcjhvealによって提供されたコードから作業しようとしましたが、これまでのところこれを取得しました(テスト目的のためだけに):

History.Adapter.bind(window,'statechange',function(){
        var State = History.getState();
        History.log(State.data, State.title, State.url);
        $(".parentSection[data-url='" + State.title + "']").css({
            "left": "0",
            "top": "0"
        });
    });

奇妙なことに、History.js で正しいタイトルにログを記録できません... ページをログに記録すると、 "lamp", "bramvanroy.be/fullScreenSection/lamp"(それぞれtitleと) のように返されますが、セクションのオブジェクトでurl定義されているタイトルを取得する必要があります。data-titleそれでも、セクションで定義されているようにtitが機能するようにコードを調整しましたが、返さdata-urlれる属性と同じtitleですが、それでも何も起こりません!

4

2 に答える 2

2

History.jsの使用法に関するドキュメントを確認してください。次のように、状態変更イベントにバインドしていることを確認してください。

History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
    History.log(State.data, State.title, State.url);
    // Handle new state.
});

別の方法として、一部の JavaScript アプリケーションでは、URL のハッシュの後の部分 (アンカーと呼ばれることもあります) を使用します。

www.myapp.com/app/#/anchor/1

この部分を変更してもリロードは必要ありません。最新のブラウザーは、pushState を使用して履歴を保存します。これは、次の JavaScript で実行できます。window.location.hash = '/anchor/1'

編集: URL が有効であることを確認する 1 つの方法は、クエリ パラメーターを使用することです。ドキュメントを見ると、完全な URL ではなく、クエリ パラメータ (例: ) が使用されていることがわかります?state=1。次のような類似のものを使用してみてください?page=lamp。

また、クリック ハンドラーで、例のようにタイトルとデータを渡してみてください。

于 2012-08-12T00:32:50.440 に答える
1

スクリプトには、次のような「現在の」URLを表示する関数が必要です。

var display_current=function() {
       //you may use History.getState() here, but i not sure what it will return, so i calculate url myself;
       var url=document.location.pathname.replace(/^.*\//,'');
       if (url == '') {url='home';}
       //Some code here to display current section based on URL
};

ページを読み込んだ後、その関数も実行する必要があります。

$(function() {display_current();});

次に、ブラウザの履歴ボタンのイベントを処理して、ブラウザの戻る/進むボタンの使用を処理する必要があります。

History.Adapter.bind(window,'statechange',function() {
       display_current();
});

ここにドキュメント

404エラーを防ぐには、リダイレクトルールを使用して.htaccessファイルをディレクトリに追加する必要があります。

RewriteEngine On
RewriteBase /
RewriteRule ^.+$  index.html

mod_rewriteの詳細はこちら

于 2012-08-09T10:30:32.543 に答える