如何使用哈希标记Href刷新页面

本文介绍了如何使用哈希标记Href刷新页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的链接的href为/ news＃1930。当我在 / news 页面上点击此链接时，它不刷新页面（它只是将＃1930添加到URL的末尾）。我希望它刷新页面（我使用#tag后面的信息和一些jquery在相应的iframe中加载特定的文章，当它不刷新时不会加载新文章）。关于如何强制刷新的任何想法？

I have a link that has an href of "/news#1930". When I click on this link when on the /news page, it does not refresh the page (it just adds #1930 to the end of the URL). I would like it to refresh the page though (I am using the info after the # tag with some jquery to load that specific article in a corresponding iframe and when it doesn't refresh it won't load the new article). Any ideas on how to force the refresh?

我目前的代码是：

$(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);
        }
 });

推荐答案

哈希意味着不会导致页面重新加载。如果您使用jQuery加载该文章，您可能需要执行history.go（0）或window.location.reload，然后使用jQuery查找哈希标记和进程（在刷新页面的加载事件上）。

Hashes are meant to not cause a page reload. If you're using jQuery to load that article you may want to perform a history.go(0) or window.location.reload, then use jQuery to find the hash tag and process (on the load event of the refreshed page).

$(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();
  });
});

编辑我认为你出于同样的原因走了哈希路线除了你使用ajax进行无缝集成之外，像facebook这样的网站也可以用于书签能力和索引。

EDIT I assume you're going the hash route for the same reason websites like facebook do as well--for book-mark ability and indexing despite that you're using ajax for the seamless integration.

EDIT 2 以下是我提出来展示我所指的内容。这将加载已通过URL传递的哈希，并处理页面中新文章的任何新点击。

EDIT 2 Here is what I've come up with to show what I'm referring to. This will load up a hash that's been passed through the URL and handle any new clicks to new articles within the page.

<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>

这篇关于如何使用哈希标记Href刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！