問題タブ [hashbang]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - AJAX 応答をドキュメントとして処理しますか?
シバンを使用して AJAX を実装しようとしています。つまり、AJAX サイトのコンテンツ領域にexample.com/#!/somepage.php
単純にexample.com/somepage.php
ロードされます。
これを行う明白な方法は、単にリクエストsomepage.php
してから、 のコンテンツ全体をdocumentElement
新しいドキュメントに置き換えることです。ただし、それは AJAX の目的に反しているようです。
代わりに、ロードを試みてから、ページsomepage.php
の一部を抽出して、それcontent
を単にコンテンツ領域に配置することを考えています。
これを行うには、正規表現を使用して検索することもでき/<div id="content">.*</div>/
ますが、それは非常に悪い考えです (最も単純な問題は、「</div>
コンテンツを終了するのはどれか?」ということです) ajaxresponse.getElementById('content')
。(または) オブジェクトに変換ajaxresponse
しますか?document
documentFragment
それとも、これはそのような AJAX セットアップを実装するための間違ったアプローチですか? サーバー側X-Requested-With: XMLHttpRequest
でコンテンツ領域のみをチェックして送り返す方がよいでしょうか?
ajax - Google はネストされたハッシュバング URL を追跡できますか?
!#my-url <-> _escaped_fragment_ "translation" を介して各コンテンツをロードすることにより、Google がメイン サイトの ajax でロードされたコンテンツを追跡できる 1 ページの Web サイトを作成しました。製品データを表示/ロードするために含まれる URL。Google は、これらの第 2 レベルの ajax コンテンツを読み取っていないようです。
そのようなコンテンツを読むようにGoogleに指示する方法はありますか??
前もって感謝します :)
php - コンテンツページのタブにHashbang(AJAX)をどのように実装する必要がありますか?
ご存知かもしれませんが、Googleは現在AJAXをクロールしています。実装ははるかにエレガントなものですが、少なくともYahooとBingAFAIKにも適用されます。
コンテキスト:私のサイトはWordpressとHTML5によって運営されています。カスタム投稿タイプにはツリータイプのコンテンツがあり、これらのコンテンツはAJAXによって駆動されます。ハッシュバン(#!)を実装する方法を完全に理解するまで、ハッシュバン(#!)を使用しないために私が得た解決策は、かなり「リスク」です。* site.com/article-one/?tab=first_tab *にリンクするHREFとしてのすべてのリンク。これは、選択したタブのコンテンツのみを表示します(<div>Content...</div>
)。このような:
お気づきかもしれませんが、data-tabはJavaScriptがAJAX Getで送信する値であり、関連するコンテンツを取得してコンテナー内にレンダリングします。反対側では、サーバーは変数を取得し<?php get_template_part('tab-first-tab'); ?>
、コンテンツを配信するためにを実行します。
リスクについては、Googleや他の検索エンジンがhttp://site.com/article-one/ではなく* http://site.com/article-one/?tab =first_tab*を取得することがわかります。タブコンテンツが自動的に選択されたホームページを表示する代わりに、ユーザーがそのURLにアクセスできるようにします。
ここでの問題は、それを回避するための実装です。
Hashbang:私が学んだことから、私はこれをすべきです。
- HREFは
site.com/article-one/#!first-tab
- JSは、hrefの「first-tab」を抽出して$ _GETに渡す必要があります(「data-tab」を使用しないため)。
- JSはURLを次のように変更する必要があります
site.com/article-one/#!first-tab
- JSは、URLにが含まれているかどうかを検出
#!first-tab
し、デフォルトのタブの代わりに選択されたタブを表示する必要があります。
さて、サーバー側の実装については、ここで私は森の中でちょっと迷っています。
- Wordpressはどのように処理し
site.com/article-one/?_escaped_fragment_=first-tab
ますか? - .htaccessで何かを変更する必要がありますか?
- HTMLスナップショットは何が必要ですか?私の推測ではすべてのサイトですが、コンテンツだけを表示するのではなく、要求されたタブが表示されています。
Wordpressが_escaped_fragment_を検出したときに処理するものを分離できると思います。Googleのようにリクエストされた場合は、すべてのコンテンツと選択したコンテンツが表示されます。そうでない場合は、AJAXがリクエストしているため、コンテンツのみが表示されます。それは正しいはずですか?
jquery - URL に独自のハッシュを追加すると、jQuery Mobile が壊れますか?
URL で独自のハッシュ パラメータを使用したいのですが、そうすると jQuery Mobile サイトが機能しなくなります。無限のスピナーを備えた真っ白な画面。jQuery Mobile を使用している場合、ハッシュが立ち入り禁止になっているというのは本当ですか?
gwt - ハッシュバング URL (GWT) でページ内 HTML アンカーを使用するには?
ハッシュバンを介してブックマーク可能な URL を持ちながら、ページ内 HTML アンカーを実装することに少し問題があります。説明は簡単です:
- アプリケーションの URL にアクセスします: http://www.mypage.com/Test.html#!mycontent
このページには多くのテキストがあり、ナビゲーション用の HTML アンカーが必要です。古いスタイルの HTML では、<a href="#myAnchor">AnchorText</a>
.
- しかし、GWT アプリケーションでこのリンクをクリックすると、URL がhttp://www.mypage.com/Test.html#myAnchorに変わります。
GWT Platform は変更を認識し、my に戻りますDefaultPlace
。URL をプレゼンターに関連付けることができないため、これは明らかです。
では、(単純な) 質問は次のとおりです。ハッシュバング URL を使用しながら、ページ内ナビゲーションを使用するにはどうすればよいですか?
ajax - ハッシュバン URL は、Google による Web サイトのクロールを困難にしますか?
私たちの代理店は、多くの AJAX インタラクションと #! (ハッシュバン) URL: http://www.gunlawsbystate.com/
スクロールできる長い本で、アドレスバーの URL が動的に変化します。IE をサポートする必要があるため、pushState の使用を勧めないでください。現時点では、hansbang が唯一のオプションです。
左側のサイドバーには、本のすべての章へのリンクを含むナビゲーションがあります。
リンクの例: http://www.gunlawsbystate.com/#!/federal-properety/national-parks-and-wildlife-refuges/
Google がこれをクロールすることを期待しています: http://www.gunlawsbystate.com/?_escaped_fragment_=/federal-properety/national-parks-and-wildlife-refuges/ これはセクションの完全な html スナップショットです。(+ www.gunlawsbystate.com/#!/federal-properety/national-parks-and-wildlife-refuges/ii-change-in-the-law/ => www.gunlawsbystate.com/ のようなサブセクションへのリンクがあります?_escaped_fragment_=/federal-properety/national-parks-and-wildlife-refuges/ii-change-in-the-law/ )。
Google の仕様 ( developers.google.com/webmasters/ajax-crawling/docs/specification ) によると、すべてが完了しているように見えます。サイトは現在約 3 か月間運営されています。ホームページは 10 ~ 15 日ごとに再インデックスされます。
問題は、何らかの理由で Google がハッシュバン URL を適切にクロールしないことです。Google はこれらの URL を単に「気に入らない」ようです。
www.google.ru/search?&q=site%3Agunlawsbystate.com : わずか 67 ページがインデックスに登録されています。Google がインデックスに登録したほとんどのページには「通常の」URL (主にワードプレスのブログ投稿、カテゴリ、およびタグ) があり、結果ページのわずか 5 ~ 10% がハッシュバング URL であることに注意してください。それが適切にクロールされるかどうかは本当に好きです。
Google が本のページを適切にクロールしない理由について、誰かアドバイスをいただけないでしょうか? どんな助けでも大歓迎です。
PS クリックできないリンクで申し訳ありません — stackoverflow では 2 つ以上投稿することはできません。
アップデート。サイトマップは、しばらく前に Google に送信されました。Google ウェブマスター ツールによると、518 件の URL が送信され、インデックスに登録された URL は 62 件だけでした。また、ウェブマスター ツールの [インデックス ステータス] ページには、これまでにクロールされたページが 1196 あることがわかります。1071 ページが選択されていません。これは、何らかの理由で Google が #! をインデックスに登録していないことを明確に示しています。頻繁にアクセスするページ。
javascript - AJAXコンテンツサイトでハッシュバンを使用する必要がありますか、それとも通常のURLを使用する必要がありますか?
だから私は、よりスムーズなユーザーエクスペリエンスといくつかの簡単な移行のために、AJAXを介して新しいページ/コンテンツをロードする非常に通常のコンテンツベースのWebサイトを作成しています。同様の実装にハッシュバンを使用している人がたくさんいます。
私の質問は、なぜ通常のURLを使用して、通常のページを提供するか、XMLHttpRequest変数に基づいてJSON /XMLなどを提供するかをサーバー側に決定させるのではないかということです。ここで一見したところ、1つのURLを使用する方が理にかなっているようですが、最初の検索でこのアイデア/アプローチについての言及がないのはなぜか不思議です。たぶん私は何かが足りないだけです...
回答:HTML5の履歴が表示される前は、ページを読み込まずに完全なURLを更新することはできませんでした。それが私の混乱が生じた場所です。
ajax - ハッシュバンページを使用したインラインナビゲーション
以前は、インラインナビゲーションにハッシュを使用していました。たとえば、次のようになります。
http://url?Category=a&item=3
(ページ内のParagraph1を指す)
ajaxの普及に伴い、ハッシュタグは別の目的に切り替わり、ページ全体をリロードせずにページを更新できるようになりました。例えば:
私の質問:そのようなページでインラインナビゲーションを機能させるにはどうすればよいですか?http://url#!Category=a&item=4
上記の例をとると、ページのParagraph1をどのように指すことができますか?
ajax - 親ウィンドウが移動したときにiframeでオーディオ停止をトリガーする(ハッシュバン)
Webページ(Facebook)のiframe(Facebookタブアプリ)にWebアプリがあります。
Webアプリは音声を再生し、ユーザーが別のFacebookリンクをクリックして移動すると、ページに別のFacebookページが読み込まれ、音声が停止します。
これは、Internet Explorer(IE9)を除くすべてのブラウザーで機能します。別のFacebookページに移動しても、オーディオは引き続き再生されます。
Facebookは、標準のページをリロードせずに、多くのページが表示されるアプローチ(hashbang#!アプローチを使用)を使用しているようです。私にとって:これは、Webアプリのオーディオが引き続き再生されることを意味します(iframeはどういうわけか孤立していますか?)。
#!を使用していない別のサイトに移動すると、オーディオの再生が停止します。URL構文とブラウザは、これらのページを適切に再読み込みします。
別のFacebookページに移動したときに、Webアプリ(Facebookタブアプリ)で音声が停止するようにするにはどうすればよいですか?私は次の方法を見ています:
- 親で適切なイベントを検出する
- Webアプリのオーディオを明示的にオフにします