8

私は現在、新しいウェブサイトを構築しようとしていますが、特別なことは何もなく、素晴らしくて小さいですが、最初は立ち往生しています。私の問題は、きれいな URL とページ ナビゲーションです。「正しいやり方」でやりたい。

私がしたいこと：

  • CodeIgniter を使用して、 「www.example.com/hello/world」のようなクリーンな URL を取得します
  • jQuery は ajax の使用に役立つので、追加のコンテンツを .load() できます
  • URL の # を取り除くために、pushstate などの HTML5 機能を使用したいと考えています。

ページを更新せずに前後に移動できるはずですが、ページには現在の URL に従って適切なコンテンツが表示されます。

また、404 エラーを発生させずにページをリロードできる必要があります。CodeIgniter のおかげでサイトが存在するはずです。(コントローラとビューがあります)

例:
非常に基本的な Web サイト。「foo」と「bar」という 2 つのリンクと、その下に空の div ボックスがあります。基本的な URL は example.com
です。「foo」をクリックすると、URL はリロードせずに「example.com/foo」に変わり、div ボックスは jQuery .load() で新しいコンテンツを取得します。同じことが他のリンクにも当てはまりますが、もちろんコンテンツと URL が異なります。
「foo」をクリックしてから「bar」をクリックした後、戻るボタンをクリックすると、「example.com/foo」に戻り、コンテンツが表示されます。このリンクを直接読み込むか、ページを更新すると、同じように見えます。404エラーなどはありません。

このページについて考えて、あなたならどうするか教えてください。この種のナビゲーションが本当に好きなので、いくつか試してみました。

これまでのところ...
CodeIgniter を使用してこのような URL を取得する方法を知っています。jQuery を使用して追加のコンテンツをロードする方法を知っています。html5 の pushstate については完全には理解していませんが、少なくとも何とか動作させることができました。しかし、私はそれをすべて一緒に機能させることはできません。私のコードは今めちゃくちゃです。それが、ここに投稿したくない理由です。さまざまなチュートリアルを見て、いくつかのコードを一緒にコピーして貼り付けました。私のCIフォルダをアップロードしたほうがいいと思います。

私が見たチュートリアルのいくつか：

(到達したリンクの最大数:/)

私の主な問題は、誰もがすべてのブラウザーや異なるバージョンと互換性を持たせようとして、スクリプト/jQuery プラグインなどを追加し、すべての追加コードに混乱することだと思います。実際の HTML コンテンツよりもスクリプト タグの間に多くのコードがあります。サンプルページに HTML5 を使用する最も基本的な方法を誰かが投稿できますか?

試行の失敗:
テスト ページに戻ると、URL が変更されますが、div ボックスには古いコンテンツではなく同じコンテンツが表示されます。また、リンクの href 属性に従ってスクリプト内の URL を変更する方法もわかりません。クリックしたリンクに応じて変化する $(this).attr('href') のようなものはありますか? 現時点では、リンクごとにスクリプトを使用する必要がありますが、これはもちろん悪いことです。サイトを更新すると、CodeIgniter が起動してビューをロードしますが、実際には、ページ全体ではなく、ajax でロードしたビュー自体のみです。しかし、レイアウトと適切なコントローラー設定で簡単に修正できるはずです. これにはまだあまり注意を払っていません。

助けてくれてありがとう。提案、アイデア、または単に何かを言及したい場合は、お知らせください。


ディラーよろしく

4

2 に答える 2

9

ここに HTML5 の歴史の成功した最小限の例を掲載しました: http://cairo140.github.com/html5-history-example/one.html

私の意見では、HTML5 プッシュステートに入る最も簡単な方法は、フレームワークをしばらく無視し、可能な限り単純な状態遷移を使用すること<body>です<title>。これらの要素以外では、マークアップの残りの部分はおそらく定型句にすぎませんが、変化する場合 (たとえば、バックエンドで HTML のクラスを変更する場合) は、それを適応させることができます。

CI のような動的バックエンドが行うことは、基本的に、特定の場所 (URL で識別される) にデータを動的に生成することで存在を偽装することです。文字通りリソースを作成し、それらを Web サーバー (おそらく Apache) がそれらを識別してフィードする場所に配置することで、フレームワークの影響を抽象化できます。ドメインルートに関連する非常に単純なファイルシステム構造があります。

/one.html
/two.html
/assets/application.js

作業中のファイルはこれら 3 つだけです。

2 つの HTML ファイルのコードを次に示します。HTML5 の機能を扱っているレベルであれば、マークアップを理解できるはずですが、明確にしていないことがあれば、コメントを残してください。順を追って説明します。

one.html

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
    <script src="assets/application.js"></script>
    <title>One</title>
  </head>
  <body>
    <div class="container">
      <h1>One</h1>
      <a href="two.html">Two</a>
    </div>
  </body>
</html>

two.html

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
    <script src="assets/application.js"></script>
    <title>Two</title>
  </head>
  <body>
    <div class="container">
      <h1>Two</h1>
      <a href="one.html">One</a>
    </div>
  </body>
</html>

one.htmlブラウザから読み込む場合は、 へのリンクをクリックするtwo.htmlと、新しいページが読み込まれて表示されます。そして からtwo.html、同じことを に戻すことができますone.html。涼しい。

さて、歴史の部分について：

assets/application.js

$(function(){
    var replacePage = function(url) {
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            success: function(data){
                var dom = $(data);
                var title = dom.filter('title').text();
                var html = dom.filter('.container').html();
                $('title').text(title);
                $('.container').html(html);
            }
        });
    }

    $('a').live('click', function(e){
        history.pushState(null, null, this.href);
        replacePage(this.href);
        e.preventDefault();
    });

    $(window).bind('popstate', function(){
        replacePage(location.pathname);
    });
});

使い方

jQuery Ready コールバック内で定義replacePageして、引数で URL を簡単に読み込み、titleand.container要素のコンテンツをリモートで取得したものに置き換えます。

呼び出しはlive、ページでクリックされたリンクがコールバックをトリガーし、コールバックが状態をhrefリンク内のにプッシュして を呼び出すことを意味しますreplacePage。e.preventDefaultまた、リンクが通常の方法で処理されないようにするためにも使用されます。

最後にpopstate、ユーザーがブラウザー ベースのページ ナビゲーション (戻る、進む) を使用したときに発生するイベントがあります。そのイベントに単純なコールバックをバインドします。Dive Into HTML ページのバージョンが何らかの理由で FF for Mac で動作しないことに注意してください。理由はわかりません。

延長する方法

この非常に基本的な例は、非常に非創造的な移行 (HTML の置き換え) を行うため、多かれ少なかれどのサイトにも移植できます。これを基礎として使用し、より創造的なトランジションに移行することをお勧めします. できることの一例として、リポジトリ内のディレクトリ ナビゲーションで Github が行うことをエミュレートすることが挙げられます。これは、フロートとオーバーフローの管理を必要とする中間的な操作です。.container読み込まれたページの を DOM に追加してから、古いコンテナを にアニメーション化するなど、より単純なトランジションから始めることができます{height: 0}。

特定の「たとえば」に対処する

HTML5 の履歴を使用するための正しい軌道に乗っていますが、何が含まれ、何が含まれるかについての考えを明確にする必要があり/fooます/bar。/基本的に、 、/foo、およびの3 つのページがあり/barます。/空のコンテナ div があります。コンテナ div に foo コンテンツが含まれている点/fooを除いて、 と同じです。コンテナ div にバー コンテンツが含まれている点を除いて、 と同じです。ここで、Javascript を使用してコンテナーのコンテンツを抽出する方法について質問します。タグが次のようになっていると仮定します。//bar/foo/foo body

<body>
  <a href="/foo">foo</a>
  <a href="/bar">bar</a>
  <div class="container">foo</div>
</body>

data次に、を介して応答からそれを抽出し、を介しvar html = $(data).filter('.container').html()て親ページに戻します$('.container').html(html)。jQuery の DOM パーサーは、要素をラップする jQuery オブジェクトではなく、要素のすべての子と要素のすべての子を含む jQuery オブジェクトを生成するため、filterより合理的な代わりに使用します。どうしてか分かりません。findheadbodyhtml

残りは、これを上記の「バニラ」バージョンに適応させるだけです。特定の段階で行き詰まっている場合は、お知らせください。より適切にガイドできます。

コード

https://github.com/cairo140/html5-history-example

于 2011-07-10T04:14:40.050 に答える
2

コントローラーでこれを試してください：

if (!$this->input->is_ajax_request())
    $this->load->view('header');

$this->load->view('your_view', $data);

if (!$this->input->is_ajax_request())
    $this->load->view('footer');
于 2012-03-19T15:53:04.007 に答える