6

単一の Web ページを指す #anchors を含む一連のリンクがあり、これらのリンクごとに個別の Web ページを持つモデルにスムーズに移行したいと考えています。リダイレクトを使用して古いリンクを引き続き機能させたい。

古いリンク スタイル:

/all_products#A
/all_products#B
/all_products#C

新しいリンク スタイル:

/products/A
/products/B
/products/C

サーバーがリクエストで #anchor 名を受信しないことはわかっていますが、Javascript は受信する可能性があります。

Javascript を使用して /all_products#A から /products/A に自動的にリダイレクトすることはできますか?

とにかくサイトで使用されているJQueryは問題ありません。

4

5 に答える 5

12

この新しい回答を追加して、URL からハッシュを抽出し、リダイレクトを実行するためのいくつかのベスト プラクティスを含めました。

// Closure-wrapped for security.
(function () {
    var anchorMap = {
        "A": "/products/A",
        "B": "/products/B",
        "C": "/products/C"
    }
    /*
    * Best practice for extracting hashes:
    * https://stackoverflow.com/a/10076097/151365
    */
    var hash = window.location.hash.substring(1);
    if (hash) {
        /*
        * Best practice for javascript redirects: 
        * https://stackoverflow.com/a/506004/151365
        */
        window.location.replace(anchorMap[hash]);
    }
})();
于 2014-01-17T23:53:41.147 に答える
3

<head>残りのページ リソースがダウンロードされる前に実行できるように、これをHTML のできるだけ上部に配置します。

<script>
function checkURL() {
    var old_path = '/all_products';
    if (window.location.pathname != old_path) {
        // Not on an old-style URL
        return false;
    }
    // Some browsers include the hash character in the anchor, strip it out
    var product = window.location.hash.replace(/^#(.*)/, '$1');
    // Redirect to the new-style URL
    var new_path = '/products';
    window.location = new_path + '/' + product;
}
checkURL();
</script>

これにより、現在のページの URL がチェックされ、古いスタイルのパスと一致する場合はリダイレクトされます。

このコードはwindow.location、現在の URL のすべての部分が既に構成要素に分割されているオブジェクトを利用しています。

このスクリプトをより汎用的にすることは、実装者の課題として残されています。

于 2009-08-24T06:51:26.897 に答える
2

これが役立つことを願っています:)

var urlSplit = document.URL.split("#");
if (urlSplit[1]) {
    location.href = "http://www.example.org" + "/" + urlSplit[1];
}
else {
    location.href = "http://www.example.org";
}
于 2009-08-24T06:07:59.777 に答える