javascript - 为什么当请求来自页面外部时 window.load 不起作用，但其他情况下却起作用？

Question

场景 Web 应用程序工作流程如下:

1. 有人点击 a href 元素进入页面。 <强> http://example.org/
2. 点击链接后将到达网站内的另一个页面。 <强> http://example.org/page-2/
3. 链接 URL 还包含哈希变量。

(这个哈希变量是我为了实现下一点而打算使用的)

有一个内容网格必须显示想要的部分，该对象是使用开箱即用的 CMS 构建的，所以我最好不想修改它。这也仅在用户单击按钮过滤器时才有效。

(此过滤器完全基于事件而不是“GUI 可见”位置，因此我无法从 url、前一个对象调用特定过滤器 - 有一个前一个对象，是的 - 对于来自 URL 的哈希值确实很好用，但新的却不行。)

内容网格过滤器元素没有任何 ID，它们只有一个要标识的数据自定义属性。

就是这样。

解决方法如下:

  $( window ).load(function() {
      var filter = window.location.hash.substr(1);
      if(filter == "keywordA") {
        $('a[data-filter=".cat-1"]').trigger('click');
      }
      if(filter == "keywordB"){
        $('a[data-filter=".cat-2"]').trigger('click');
      }
      if(filter == "keywordC"){
        $('a[data-filter=".cat-3"]').trigger('click');
      }
      if(filter == "keywordD"){
        $('a[data-filter=".cat-4"]').trigger('click');
      }
      if(filter == "keywordE"){
        $('a[data-filter=".cat-5"]').trigger('click');
      }
  });

然后，黑暗和未知的力量就位了，因为当我在地址栏中输入: http://example.org/page-2/#keywordD DOM 运行良好，正如预期的那样。内容网格显示的正是我想要的。

但是当我尝试从 http://example.org/ 中的 a href 元素访问相同的链接时它根本不做任何事情。

进一步说明

我使用了 window.load 因为这样一旦 DOM 中的所有内容都解决了，并且在 $(document).ready( 的每个代码实例之后，该函数就会被强制执行) 功能，因为该网站已经可以使用其中的许多功能。

Answer 1

问题是这样的: 从链接 http://example.org/page-2/# 导航时到同一页面的不同链接，但具有不同的哈希变量，例如 http://example.org/page-2/#keywordD ，该网站实际上并没有重新加载。这是默认行为，因为它意味着跳转到页面上具有哈希 id 的元素。

幸运的是，网站上有一个哈希更改事件。

'onhashchange'

现在，根据过滤的工作方式，您可能想要调用一个执行所有过滤的函数(在加载页面时执行此操作的函数)，或者，如果这是服务器端 CMS 的东西，您可能想要重新加载页面。

$(window).bind('hashchange', function(e) {
    // Enter your filter function here
    doFiltering();
});

或者如果重新加载页面更合适。

$(window).bind('hashchange', function(e) {
    document.location.reload();
});

我不太明白你所说的“这个过滤器完全基于事件而不是‘GUI可见’位置”是什么意思，所以如果我误解了你，你可能想在评论中详细说明一下，但是我希望这些解决方案中的任何一个对您有用。