2010-11-12 102 views
5

我有一个链接href为"/news#1930"。当我在/news页面上点击此链接时,它不会刷新页面(它只会将#1930添加到URL的末尾)。我希望它刷新页面虽然(我使用#标签后的信息与一些jquery加载相应的iframe中的特定文章,当它不刷新它不会加载新的文章)。有关如何强制刷新的任何想法?如何使用哈希标签制作页面Href刷新

我目前的代码是:

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

回答

-5

散列之前尝试的空间:

"/news #1930" 
+0

好,良好的通话。这适用于一个链接,但我实际上有三个这样的链接。当它们都有空格时,就会出现不刷新的问题。我在第一个,第二个和第三个之间放了一个空格,从而绕开了这个问题。这有效,但不能成为最好的方式。有关如何使这一点变得更好的想法? – Andrew 2010-11-12 21:43:14

+0

没有太多的哈希URL。我不认为有另一条路线。也许标记散列值将是使用多个散列值的好替代。 – 2010-11-14 01:31:07

6

散列是为了不引起页面重新加载。如果您使用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> 
+0

该文章位于iframe中,这实际上是造成所有这些问题的原因。在网站上的所有页面上都有iframe中文章的侧边栏链接。我需要一种链接到新闻页面的方法,然后打开正确的文章。我发现这样做的方式是在侧边栏链接中添加一个哈希标记,然后将其转换为与文章ID对应的四位数字,并将其附加到iframe网址的末尾。除上述问题外,它适用于所有页面。如果你对整个问题有更好的解决方法,我肯定会接受。 – Andrew 2010-11-12 22:16:38

+0

在上面的loadArticle()函数中,您可以通知iFrame切换位置(与$('#iframe').attr('src','http://mysite.com/article'+articleId+' .html'); - 除非我不完全了解情况,否则你试图完成的任务应该相当简单 – 2010-11-14 20:34:20

+0

我确信这应该很容易,但我在解决它时遇到了一些麻烦。我在上面的问题中添加了我目前使用的代码,它(每个链接#标签之间的空格数量不同)工作得很好,我只知道这不是最好的方法,并且希望做到这一点任何帮助都会很棒。 – Andrew 2010-11-22 15:00:13

-1

试试这个:

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

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

此代码将重新加载每个页面女巫环节都有哈希