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

2024-03-07

我有一个 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();
  });
});

EDIT我假设您采用哈希路径的原因与 facebook 等网站的原因相同——用于书签功能和索引,尽管您使用 ajax 进行无缝集成。

EDIT 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Hash 标签 Href 刷新制作页面 的相关文章

  • 从 iFrame 嵌入 API 获取 YouTube 视频信息

    我正在使用 YouTube iFrame API 嵌入视频并创建一个简单的自定义播放器 我正在寻找视频标题 描述 等 无需再次调用 YouTube 即可获取信息 我无法找到任何相关信息 有什么想法 或者我是否需要额外拨打电话来获取视频信息
  • 如何使用 jQuery 向表中添加新行,并为其分配递增的 id

    我有一个现有的 HTML 表格 它是用户输入 GPS 点的表单的一部分 用户还可以选择上传 GPS 数据点 我想要一个用户可以按下的按钮 其中一些 Javascript 会向表中添加一个或多个新行 但新行必须继续增加表中使用的名称和 id
  • 使用 jquery 将字符串数组转换为整数

    我正在尝试将 jquery 中的字符串数组转换为整数数组 这是我的尝试 var cdata data values split each cdata function i l l parseInt l 我认为在这种情况下你不需要使用 Jqu
  • 将杂散文本包裹在 div 中

    如何选择 任何没有包含标签的内容 来在 jQuery 中添加包装器 前任 div class post div class whatever This should remain untouched div I want to wrap t
  • 根据用户输入使用 Jquery 显示/隐藏字段

    li class numeric optional li
  • Fancybox 画廊组

    我正在使用 fancyboxhttp fancyapps com fancybox http fancyapps com fancybox 我的问题是 我可以将不同的资源组合在一起吗 我的意思是同一画廊 或 组 中带有内嵌或视频的图像 如果
  • 我可以使用 jQuery 动态创建文件(及其内容)吗? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 这是我的 HTML 代码 ul li
  • jQuery:动态添加 DOM 元素时尝试将函数挂钩到 onclick,但它立即执行该函数

    我正在使用 jQuery 动态 我的意思是在运行时 向页面的 DOM 添加一个 span 元素 create add task button document createElement span attr id activityNameH
  • 无法让基本的 pjax 示例工作

    编辑 非 工作示例在这里 http www jogos mmorpg com pjax html http www jogos mmorpg com pjax html 我正在尝试重现一个非常基本的 PJAX 示例 如自述文件中所述 htt
  • Jquery 表单验证 - 电话号码

    我已经在表单上设置了 jQuery 验证 该验证当前测试电话号码字段不为空并且是一个数字 但我希望它能够处理用户在手机 区号后放置空格的情况 谁能建议我需要做什么才能允许这样做 这是我当前的代码 if phone length 0 name
  • 使用 jQuery 提交一个又一个表单?

    如何设置自动队列系统来依次运行多个提交 我不希望他们立即提交 否则可能会破坏我的后端 PHP 脚本 这是一个简单的例子 假设每个表单都可以独立提交 并且主提交将串行运行所有表单
  • 如何以编程方式禁用 元素上的自动选择?

    然后用户使用 TAB 或 SHIFT TAB 跳转 到某个文本框 并且该文本框恰好有一个值 那么该值将被自动选择 我想禁用此行为 我认为这可以在 focusin 事件处理程序内部完成 input text focusin function
  • 如何在提交表单时调用 jquery 函数?

    我有一个表格如下
  • toastr (jquery) 只能显示一次

    你能帮我限制烤面包机的外观吗 给定的情况是 当我登录系统时 欢迎 toastr 只会在主屏幕上出现一次 并且在整个会话中不会再次出现 直到我注销为止 这是我的 toastr 代码 setTimeout function toastr opt
  • Scrapy仅抓取网站的一部分

    您好 我有以下代码来扫描给定站点中的所有链接 from scrapy item import Field Item from scrapy contrib spiders import CrawlSpider Rule from scrap
  • 如何将毫秒转换为可读的日期?

    下列 new Date 1324339200000 toUTCString Outputs Tue 20 Dec 2011 00 00 00 GMT 我需要它返回Dec 20 除了我可以使用的更好的方法之外toUTCString 我正在寻找
  • 如何为多个元素添加Class?

    我正在使用这段 javascript 向多个元素添加一个类 我试图引用多个 div 并向它们添加类 它只适用于第一个 JavaScript
  • 如何获取 Html.Editorfor 的日期选择器

    在我的 MVC3 剃刀页面上 我有一个日期字段 Html EditorFor model gt model Member Dob 下面给出的是我试图获取出生日期字段的日期选择器的代码 Scripts jquery validate min
  • 如何防止 CSS 或 jQuery 中单词和标点符号之间的换行

    我在一个段落中有一些文字 我的问题是 当标点符号位于单词末尾时 有时可以换行到下一行 像这样 This is the text This is a new line 我可以用 CSS 或 jQuery 解决这个问题吗 如果您不在单词和标点符
  • 动态 jquery 对话框弹出窗口

    我只使用过已知数量的 JQuery 对话框 并且在使动态版本正常工作时遇到了各种麻烦 希望有人能帮助我解决这个问题 这是我用已知数字执行此操作的方法 opener1 click function dialog1 dialog open di

随机推荐