問題タブ [pushstate]

多くの人が、hashbang ではなく pushState を使用すると言っています。

私が理解できないのは、hashbang を使用せずに検索エンジン フレンドリーにするにはどうすればよいかということです。

おそらく、pushState コンテンツはクライアント側の JavaScript コードによって生成されます。

したがって、シナリオは次のとおりです。

私はオンexample.comです。ユーザーがリンクをクリックします:href="example.com/blog"

pushState はクリックをキャプチャし、URL を更新し、どこかから JSON ファイルを取得し、コンテンツ領域にブログ投稿のリストを作成します。

ハッシュバングを使用すると、Google は escaped_fragment URL にアクセスして静的コンテンツを取得することを知っています。

pushState を使用すると、JavaScript コードを使用して JSON を読み込んでテンプレートを作成することができないため、Google は何も認識しません。

私が見ることができる唯一の方法は、サーバー側でテンプレートをレンダリングすることですが、それはアプリケーション層をクライアントにプッシュする利点を完全に無効にします.

それで、私はこれを正しく理解しています.pushStateは、クライアント側のアプリケーションにとってSEOフレンドリーではありませんか?

GitHubのブログに見られるように、ツリーブラウジング用のHTML5のJavaScriptpushState機能（最新のブラウザー用）を実装し、ハッシュバングなしでAJAXナビゲーションを実現しました。

コードは単純です：

これにより、非常にエレガントに次のことが可能になります。

1. ページ全体ではなく、AJAXを介して新しいコンテンツだけをリクエストする
2. トランジションをアニメーション化する
3. そして、ブラウザのURLを変更します（ Twitterのようにだけでなく— twitter.com/stackexchange→twitter.com/#!/stackexchange）#

私の質問は、JavaScriptが、pushStateあるWebサイトが別のWebサイトを模倣して、説得力のあるフィッシング攻撃を引き起こすのをどのように防ぐのかということです。

少なくとも、ドメインは変更できないようですが、サイト内の複数のパスについてはどうでしょうか。複数の無関係で信頼できないコンテンツプロバイダーによる可能性があります。あるパス（IE / joe）は本質的に別のパス（pushState / jane）を模倣し、悪意のある目的で模倣コンテンツを提供できますか？

以下の状況で困っています。

1. ユーザーがサイトにアクセス
2. ユーザーが history.pushState を使用して URL を更新するリンクをクリックする
3. ajax 経由で読み込まれた部分的なページ コンテンツ (jQuery を使用)
4. ユーザーが通常のリンクをクリックすると、新しいページが読み込まれます
5. ユーザーがクリックして pushState エントリに戻る
6. ページには、ajax を介して取得されたページの部分のみが表示されるようになりました

さまざまなことに pushState を使用してサイトを強化した結果、驚くほど応答性の高い Web アプリが作成されましたが、この問題により、これを使用できなくなりました。

コードのサンプルを次に示します。

ノート：

• window.onpopstate 関数にアラートを配置すると、ステップ 5 でイベントがトリガーされないように見えます。これはバグですか?
• この問題は、ajax が使用されている場合にのみ発生します。
• pushState の後に呼び出すことができるように、popstate 関数を分離する必要がありました。window.onpopstate イベントを手動でトリガーする方法はありますか?

history.pushState() および window.onpopstate のフォールバック関数を追加するにはどうすればよいですか? if..else のようなロジックが必要です。ブラウザが続行をサポートしている場合、そうでない場合は別のロジックが必要です。一部の最新のブラウザでもサポートされていません。iPadで。pushState でない場合、JS でブラウザーの戻るボタンのクリックを無限ループなしでキャッチする方法が必要です。

このpushStateメソッドは状態オブジェクトを受け入れます。Firefoxのドキュメントによると、このオブジェクトの最大サイズは640kbです。ブラウザが実装できる最小の最大サイズは仕様で定義されていますか？主要なブラウザが少なくとも100kbを提供することを合理的に期待できますか？

編集：Chromeでテストしましたが、1MBを超える状態オブジェクトでも機能していました。

私は HTML5 の履歴 API 別名 psuhState を HTML4 ブラウザーの適切なフォールバックで利用する最良の方法を研究してきました。

Github は、ツリーの参照に履歴 API を使用します (次のリンクは単なる例であり、github が使用するライブラリではありません)。

https://github.com/browserstate/History.js/

私が理解できないのは、Firefox 3.5 などの HTML4 ブラウザーでこの機能をどのように処理するかです。

この種のことを処理するために、具体的には history.js (上記のリンク) を調べました。しかし、私が避けたい HTML4 ブラウザの # ハッシュ実装が必要です。

HTML4 ブラウザーを使用して Github にアクセスし、ディレクトリ ツリーを参照すると、HTML5 ブラウザーと同じように見えます (つまり、URL の状態)。

FF3.5 で JavaScript を無効にすると、以前は次のような URL でした。

https://github.com/browserstate/history.js/tree/master/tests

次のようになります。

https://github.com/browserstate/history.js/tree/a32e91aa1fe5909a29abb690a37f6c129e98068e/tests

何かご意見は？

私は現在、新しいウェブサイトを構築しようとしていますが、特別なことは何もなく、素晴らしくて小さいですが、最初は立ち往生しています。私の問題は、きれいな 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フォルダをアップロードしたほうがいいと思います。

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

• HTML5 に飛び込む
• HTML5 デモ
• ブラウザの履歴を操作する Mozilla
• Saner HTML5 の歴史
• Github: History.js

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

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

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

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

ディラーよろしく

ページの中央に 1 つのスライドのみを表示する、左右に移動する 4 つのスライドを含む基本的なスライダーがあるサイトで作業しています。すべてのスライドのコンテンツは、それぞれ独自の div 内の 1 つのページに読み込まれます。

派手なものはありません。また、各スライドにはリンクが関連付けられています。

そこで、History.js を使用して各スライドをそれぞれのリンクにリンクし始めました。www.example.com/about. 問題なく状態を変更できます。前後の作業と URL の変更。

私がたまたま気付いたのは、www.example.com/about のような偽の URL でページをロードすると、ページが 404 を返すということです。

404 が発生しないようにするにはどうすればよいですか? また、ページが正しいスライドに移動するようにするにはどうすればよいですか?

これを行うべき別の方法はありますか？

私は jQuery と HTML5 を使用して LAMP スタックにいます。

私は本当にこれに行き詰まっています...ありがとう！

symfony：http: //www.symfony-project.org pjax：https ://github.com/defunkt/jquery-pjax

こんにちは、みんな、

私はウェブサイトを高速化するためにsymfonyでpjaxを使用しようとしています（ほとんどの場合、ヘッダーとフッターを静的に保つことができ、多くのcss / jsやその他のファイルのリロードを回避できます）。

ajaxやsymfonyに問題はありませんが、もっと良い方法があるかどうか知りたいです。

1. postExecuteを使用して、sfがテンプレートにまったくアクセスせずにhtmlコードをすぐに返すことをお勧めしますか？

2. もしそうなら、どういうわけか私はこれをすべてのモジュールに対して一度だけ書くことができますか？私は私ができることを想像します：

   mySfActionsはsfActionsを拡張します

   moduleActionsはmySfActionsを拡張します

もっと良い方法があるのだろうか？3.コントローラー/アクション内で現在のレイアウト名（モジュールのview.ymlで定義されている）を取得する方法はありますか？

私はAJAXと履歴オブジェクト（.pushStateメソッドを使用）を使用しています。pushStateメソッドを呼び出す適切なタイミングを知りたいだけですか? 依頼前ですか？リクエスト後？または、XMLHttpRequest のどの状態でreadyState呼び出す必要がありますか? 可能な限り、通常のリクエスト (AJAX なし) のように動作するようにしたいと考えています。