Skip to main content
 首页 » 编程设计

jquery之如何使用 Hash 标签 Href 刷新制作页面

2026年07月31日6emanlee

我有一个 href 为 "/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); 
        } 
 }); 

请您参考如下方法:

哈希值不会导致页面重新加载。如果您使用 jQuery 加载该文章,您可能需要执行 History.go(0) 或 window.location.reload,然后使用 jQuery 查找哈希标签并进行处理(在刷新页面的加载事件上)。

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