web-dev-qa-db-ja.com

単一ページのWebサイトで機能するように戻るボタンを取得し、「話す」URLを実装する

私は単一ページのWebサイトを持っており、次のことを実現したいと考えています。

  1. 通常のウェブサイトのように機能する戻るボタン

  2. そして言う代わりに、

www.mysite.com/index.php?p=#this-is-a-great-product

このURLが欲しいのですが

www.mysite.com/this-is-a-great-product

戻るボタンが正しく機能している間。

1.）に関して私は次のコードを使用します。

<!-- Getting BackButton to  work properly -->
<script type="text/javascript">
var times = 0;
function doclick() {
    times++;
}
function doclick() {
    times++;
    location.hash = times;
}
window.onhashchange = function() {     
    if (location.hash.length > 0) {        
        times = parseInt(location.hash.replace('#',''),10);     
    } else {
        times = 0;
    }
}
</script>

…しかしもちろん、アンカーを/＃1に変更し、次に/＃2などに変更して、戻るボタンを機能させます。しかし、私はプログラマーではないので、それを変更する方法がわかりません…:(

2.）に関して私はhtaccessにこれを追加することができます：

>RewriteEngine On
>RewriteRule ^([^/.]+)/?$ /index.php?page=$1

これにより、/ index.php？p = productsが/ productsに変更されます。

したがって、上記のコード（1未満）を変更して、すべてのアンカーを＃1、＃2などに変更せず、代わりに2で達成したURLを参照/使用するにはどうすればよいですか？

www.mysite.com/this-is-a-great-product

そして（おそらく非常にばかげた質問ですが、非常に重要な質問です）-私がonlyを使用している場合、私の新しいURLリンクサイト-これでもコンテンツが重複する可能性があるという危険性はありますか？

これに関して、rel canonical link = index.phpを使用して、（その理由またはその他の理由で）単一ページのindex.phpをそれ自体に優先する必要がありますか？

よろしくお願いします！

javascripthtml.htaccesssingle-page-application
14
suri

HTML5は、ブラウザの履歴をサポートするAPIを提供し、リロードせずにURLを管理できます。

このリンクを確認してください

http://diveintohtml5.info/history.html

デモは

http://html5demos.com/history

4
developerCK

基本的に、私はjsfiddleに小さなプロトタイプを作成しました。これは、ajax呼び出しを介してアクセスされるすべてのURLを追跡します。

リンクにアクセスするためのナビゲーションも含まれています。

実際の動作：

  • historyというグローバル配列を作成しました。これは、ajaxを介してアクセスされたすべてのURLを順番に追跡します。
  • また、index配列内のリンクを前後にナビゲートするときにアクセスされているURLを追跡するために定義されたグローバルhistoryがあります。
  • 有る History sectionjsfiddleの下部にあります。これは、リンク名をキャプチャし、アクセスされた順序でリンクを投稿することにより、リンクにアクセスする順序を示しています。

JSコード：

$(function () {
var history = [];
var index = 0;
$('.links').on('click', function () {
    $('#history').append($(this).text());
    var address = $(this).attr('data-ref');
    index += 1;
    history[index] = address;

    $('.links').attr('disabled', 'disabled');
    loadExternalPage(address);
    console.log('list:' + history);
});

$('#back').on('click', function () {
    console.log(index);
    index -= 1;
    console.log(index);
    console.log(history[index]);
    loadExternalPage(history[index]);
});

$('#forward').on('click', function () {
    console.log(index);
    index += 1;
    console.log(index);
    console.log(history[index]);
    loadExternalPage(history[index]);
});

var loadExternalPage = function (address) {
    console.log(history[index]);
    $('#result-section').load(address, function () {
        console.log('data-loaded');
        $('.links').removeAttr('disabled');
    });
};
});

ライブデモ@ JSFiddle： http://jsfiddle.net/dreamweiver/dpwmcu0b/8/

注：このソリューションは完璧にはほど遠いので、最終的なソリューションとは見なさず、構築のベースとして使用してください

1
dreamweiver

前述のように、HTML5 HistoryAPIを使用することをお勧めします。このAPIは比較的新しいため、ブラウザのサポートが問題になることに注意してください。これを書いている時点で、世界中のインターネットユーザーの約71％がそれをサポートしています（ブラウザのサポート情報については http://caniuse.com/#feat=history を参照してください）。したがって、このためのフォールバックソリューションがあることを確認する必要があります。古い＃を使用することをお勧めします！ HTML 5 HistoryAPIが採用される前に普及していたソリューション。

履歴APIを使用して、たとえばexample.com/#!settingsをexample.com/settingsに置き換え、ユーザーがより適切なURLをブックマークすると、ユーザーがそのURLにアクセスすると、ブラウザーはサーバーに/settingsを要求します（これはtは実際にはWebサーバーのコンテキストに存在します）。したがって、Webサーバーにいくつかのリダイレクトルール（つまり、RewriteEngine）があることを確認して、きれいなURLを取得して＃にリダイレクトできるようにする必要があります。バージョン（そして、ユーザーのブラウザが履歴APIをサポートしている場合は、それをニースURLに置き換えることができます）。

自分でプログラミングすることにあまり慣れていない場合は、多くの作業を行うJavaScriptライブラリを使用することをお勧めします。私はいくつかの簡単な検索を行い、次のものを発見しましたが、もっと良いものがあるかもしれません： https://github.com/browserstate/history.js

1
Kyle