如何使用哈希标签 Href 刷新页面答案

【问题标题】：How to Make Page with Hash Tag Href Refresh如何使用哈希标签 Href 刷新页面
【发布时间】：2011-05-09 07:34:57
【问题描述】：

我有一个链接，其 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 iframe hyperlink href

【解决方案1】：

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

此代码将重新加载每个带有哈希链接的页面

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

哈希旨在不会导致页面重新加载。如果您使用 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>

【讨论】：

文章位于 iframe 中，这确实是导致所有这些问题的原因。在网站的所有页面上都有 iframe 中文章的侧边栏链接。我需要一种方法来链接到新闻页面，然后打开正确的文章。我发现这样做的方法是在侧边栏链接中添加一个井号标签，然后将其转换为与文章 ID 对应的四位数字，并将其附加到 iframe URL 的末尾。除上述问题外，它适用于所有页面。如果您对整个问题有更好的方法，我肯定会接受。
在上面的 loadArticle() 函数中，您可以通知 iFrame 切换位置（类似于 $('#iframe').attr('src','mysite.com/article'+articleId+'.html'); - - 除非我不完全了解情况，否则您要完成的工作应该相当简单。
我相信这应该很容易，但我很难弄清楚。我在上面的问题中添加了我目前拥有的代码。这（每个链接#标签之间有不同数量的空格）效果很好，我只知道这不是最好的方法，并且希望以正确的方式来做。任何帮助都会很棒。
@Andrew：请参阅上面答案中的更新。我已经编写了一个 PoC 供您学习。希望这能回答您的问题，否则请告诉我您还需要什么，我会尽力提供帮助。

【解决方案4】：

在哈希之前尝试一个空格：

"/news #1930"

【讨论】：

好的，好的。这适用于一个链接，但我实际上拥有其中三个链接。当它们都有空格时，同样会出现不刷新的问题。我通过在第一个之间放置一个空格，第二个之间放置两个，第三个之间放置三个来解决这个问题。这可行，但不是最好的方法。有什么想法可以让它变得更好吗？
对 URL 进行哈希处理并不多。我不认为有其他路线。也许对哈希值进行标记可以很好地替代使用多个值。