Как сделать страницу с Hash Tag Href Refresh - PullRequest
Новая
       26

Как сделать страницу с Hash Tag Href Refresh

5 голосов
/ 13 ноября 2010

У меня есть ссылка с "/news#1930".Когда я нажимаю на эту ссылку на странице /news, она не обновляет страницу (она просто добавляет # 1930 в конец URL).Я хотел бы обновить страницу (хотя я использую информацию после тега # с некоторым jquery, чтобы загрузить эту конкретную статью в соответствующий iframe, и когда она не обновляется, она не загружает новую статью).Любые идеи о том, как заставить обновления?

Код, который у меня есть в настоящее время: 

$(document).ready(function() {
  var $news_story       = $(window.location.hash.substring(1)),
      $news_number      = $news_story.selector,
      $news_url         = 'http://www.synergy-pr.com/news/mediacenter/index.html?view=article&CustomerID=41b1if9-a17d4va5sf7of15e3kb0pa3kd2y-99d03n8sq4ad2xk8h47j00r98el5pf&ClientArticleID=' + $news_number, //url of specific article
      $news_url_default = 'http://www.synergy-pr.com/news/mediacenter/index.html?CustomerID=41b1if9-a1hd4xa52f78f1ke3bb0oa3ld2k-90208c8g64x02nh8wf7ad0m181p5su'; //url of general news page

        if ($news_number.length>0) { //if their is a # with a number, this means it is a sidebar link and should load that specific article
          $('#news-feed').attr('src', $news_url);
        } else { //if not, load the main news page
          $('#news-feed').attr('src', $news_url_default);
        }
 });

Ответы [ 4 ]

6 голосов
/ 13 ноября 2010

Хэши не должны вызывать перезагрузку страницы.Если вы используете jQuery для загрузки этой статьи, вы можете выполнить history.go (0) или window.location.reload, а затем использовать jQuery, чтобы найти хеш-тег и обработать (в событии load обновленной страницы).

$(document).ready(function(){
  loadArticle = function(articleId){
    // code to query/load the article
  };
  if (window.location.hash)
    articleLoad(window.location.hash);

  $('.articleLink').click(function(){
    window.location.hash = $(this).attr('rel');
    window.location.reload();
  });
});

РЕДАКТИРОВАТЬ Я предполагаю, что вы идете по пути хэширования по той же причине, что и веб-сайты, такие как Facebook - для возможности закладки и индексации, несмотря на то, что вы используетеAJAX для плавной интеграции.

РЕДАКТИРОВАТЬ 2 Вот то, что я придумал, чтобы показать, что я имею в виду.Это загрузит хеш, который был передан через URL, и обработает все новые клики на новые статьи на странице. 

<html>
  <head>
    <title>Article Viewer</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){

        // loader function to serve up the correct article (pushes the article number to an iFrame
        // so it can remotely load the article within the page
        loadArticle = function(articleId){
          // set the hash (incase it's called from a link instead of a page load)
          window.location.hash = articleId;
          // change the iFrame src to the actual path fo the article page (customize this to fit your needs)
          $('#article-frame').attr('src','view_article.php?article='+articleId);
        };

        // check for a hash (#????) tag in the URL and load it (to allow for bookmarking)
        if (window.location.hash)
          loadArticle(window.location.hash.substring(1));

        // attack a click event to all the links that are related to loading an article
        $('.article-link').click(function(){
          // grab raw article id from rel tag
          var articleId = $(this).attr('rel');

          // shove loading it off to the "loader"
          loadArticle(articleId);

          // cancel the navigation of the link
          return false;
        });
      });
    </script>
  </head>

  <body>
    <ul>
      <?php for ($a = 1; $a < 10; $a++) echo "<li><a href=\"view_article.php?article={$a}\" rel=\"{$a}\" class=\"article-link\">View Article {$a}</a></li>\r\n      "; ?>
    </ul>
    <iframe id="article-frame" src="view_article.php?article=0" width="640" height="480">
      This page uses frames, unfortunately your browser does not support them.
    </iframe>
  </body>
</html>
1 голос
/ 02 июля 2015 

    $("a").click(function () {
        var hash = this.hash;
        if (hash != "" || hash!= null)
            window.location.reload();
    });

Этот код будет перезагружать каждую страницу с хэш-ссылкой

0 голосов
/ 15 февраля 2013

Попробуйте это: 

$("a").click(function(){
    $("a").click(function(e){

    var location = $(window).attr('location').pathname.substring(1);
    var goingToPage = $(this).attr('href');

    // if goingToPage is same page as current page, then assign new url and reload
    // this is required to reload the page on a hash tag
    if(goingToPage.indexOf(location) != -1){
        $(window).attr('location').assign(goingToPage);
        $(window).attr("location").reload();
    }
});
});
0 голосов
/ 13 ноября 2010

Попробуйте пробел перед хешем: 

"/news #1930"
...