Javascript для перенаправления из #anchor на отдельную страницу - PullRequest
Новая
       26

Javascript для перенаправления из #anchor на отдельную страницу

6 голосов
/ 20 августа 2009

У меня есть набор ссылок с #anchors, указывающими на одну веб-страницу, и я хотел бы плавно перейти к модели с отдельной веб-страницей для каждой из этих ссылок. Я хочу, чтобы старые ссылки продолжали работать с использованием перенаправления.

Старый стиль ссылки: 

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

Новый стиль ссылки: 

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

Я знаю, что сервер не получает имя #anchor в запросе, но Javascript может.

Можно ли автоматически перенаправить из / all_products # A в / products / A с помощью Javascript?

JQuery будет в порядке, он все равно используется на сайте.

Ответы [ 5 ]

11 голосов
/ 18 января 2014

Я добавил этот новый ответ, чтобы включить некоторые рекомендации для извлечения хеша из 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]);
    }
})();
3 голосов
/ 24 августа 2009

Поместите это как можно ближе к верху вашего HTML <head>, чтобы он мог выполняться до загрузки остальных ресурсов страницы: 

<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, уже разделенные на составные части.

Создание этого сценария более обобщенным оставлено в качестве упражнения для разработчика.

2 голосов
/ 24 августа 2009

Надеюсь, это поможет:) 

var urlSplit = document.URL.split("#");
if (urlSplit[1]) {
    location.href = "http://www.example.org" + "/" + urlSplit[1];
}
else {
    location.href = "http://www.example.org";
}
0 голосов
/ 20 августа 2009

В jquery либо просто замените href на правильный: 

$('a').each(function() {
  this.href = this.href.replace(/all_products#/, 'products/');
});

или захватывать клики и перенаправлять: 

$('a').click(function() {
  window.location = this.href.replace(/all_products#/, 'products/');
  return false;
});
0 голосов
/ 20 августа 2009

это может помочь: 

<a href="/all_products#A" onclick="return redirectMe(this);">A</a>
<a href="/all_products#B" onclick="return redirectMe(this);">B</a>
<a href="/all_products#C" onclick="return redirectMe(this);">C</a>
<a href="/all_products#D" onclick="return redirectMe(this);">D</a>
<a href="/all_products#E" onclick="return redirectMe(this);">E</a>

<script type="text/javascript">
function redirectMe(a){
   var aa=a+"";
   window.location=aa.replace(/#/g,"/");
}
</script>
...