2010-11-12 15 views
5

J'ai un lien qui a un href de "/news#1930". Quand je clique sur ce lien quand sur la page /news, il n'actualise pas la page (il ajoute juste # 1930 à la fin de l'URL). Je voudrais cependant actualiser la page (j'utilise l'info après la balise # avec un certain jquery pour charger cet article spécifique dans un iframe correspondant et quand il ne se rafraîchit pas, il ne chargera pas le nouvel article). Des idées sur la façon de forcer l'actualisation?Comment faire une page avec Hash Tag Href Refresh

Le code que j'ai actuellement:

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

Répondre

-5

Essayez un espace avant le hachage:

"/news #1930" 
+0

Ok, bon appel. Cela fonctionne pour le lien un, mais j'ai réellement trois de ces liens. Quand ils ont tous des espaces, le même problème de non rafraîchissement se produit. J'ai piraté cela en mettant un espace entre le premier, deux entre le deuxième et trois entre le troisième. Cela fonctionne, mais ne peut pas être la meilleure façon de le faire. Des réflexions sur la façon de rendre cela meilleur? – Andrew

+0

Les URL de hachage ne sont pas très nombreuses. Je ne pense pas qu'il y ait une autre route. Peut-être que tokeniser la valeur de hachage serait un bon substitut à l'utilisation de plusieurs. –

6

hashs sont destinés à ne pas provoquer un rechargement de la page. Si vous utilisez jQuery pour charger cet article, vous pouvez exécuter history.go (0) ou window.location.reload, puis utiliser jQuery pour trouver le tag et le processus de hachage (sur l'événement de chargement de la page actualisée).

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

EDIT Je suppose que vous allez la route de hachage pour les mêmes sites de raison comme facebook faire aussi bien - pour la capacité de marque de livre et l'indexation malgré que vous utilisez ajax pour l'intégration transparente.

EDIT 2 Voici ce que j'ai trouvé pour montrer de quoi je parle. Cela va charger un hachage qui a été passé à travers l'URL et gérer les nouveaux clics vers de nouveaux articles dans la 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> 
+0

L'article est situé dans un iframe, qui est vraiment ce qui a causé tous ces problèmes. Sur toutes les pages sur le site ont des liens de la barre latérale pour les articles au sein de l'iframe. J'avais besoin d'un moyen de créer un lien vers la page d'informations, puis d'ouvrir l'article correct. La façon dont j'ai trouvé cela a été d'ajouter une étiquette de hachage aux liens de la barre latérale, puis de la convertir en un nombre à quatre chiffres correspondant à l'identifiant de l'article et de l'ajouter à la fin de l'URL iframe. Cela fonctionne sur toutes les pages sauf pour le problème ci-dessus. Si vous avez une meilleure approche de l'ensemble du problème, je serais ouvert à cela à coup sûr. – Andrew

+0

Dans la fonction loadArticle() ci-dessus, vous pouvez indiquer à l'iFrame de changer d'emplacement (quelque chose à l'effet de $ ('#iframe') .attr ('src', 'http: //monsite.com/article'+articleId+' .html '); - À moins que je ne comprenne pas complètement la situation, ce que vous essayez d'accomplir devrait être assez simple –

+0

Je suis sûr que cela devrait être assez facile, mais j'ai du mal à le comprendre. J'ai ajouté le code que j'ai actuellement dans ma question ci-dessus.Cela (avec le nombre différent d'espaces entre chaque tag # tag) fonctionne très bien, je sais juste que ce n'est pas la meilleure façon de le faire et je voudrais le faire correctement De toute façon, toute aide serait géniale. – Andrew

-1

Essayez ceci:

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

Ce code rechargera tous les liens de sorcière page a hachage