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

Question

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

有人点击 a href 元素进入页面。 http://example.org/
接着是 link，然后到达站点内的另一个页面。 http://example.org/page-2/
link URL 还包含一个哈希变量。

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

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

（此过滤器完全基于事件而不是 "GUI visible" 位置，因此我无法从 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 元素到达相同的 link 时，它什么也没做完全没有。

进一步说明

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

Answer 1

问题来了： 当从 link http://example.org/page-2/# to a different link that is the same page, but has a different hash var, like 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();
});

我不太明白你所说的 "This filter is based entirely on events and not on 'GUI visible' locations" 是什么意思，所以你可能想在评论中详细说明一下，如果我误解了你，但我希望这些解决方案中的任何一个对你有用.

Answer 2

答案

尽管 window.load 事件据说是为了在所有 DOM 完全加载时触发功能，但我还是在附加处理程序之前触发了事件。

感谢诺亚。

根据之前的回答，我可以设置所需的行为，如下所示：

$( window ).load(function() {
   setTimeout(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');
      }
    },10);
  });

只是一个简单的延迟。

非常感谢 Stefan 抽出时间。

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

Why window.load isn't working when the request comes from outside the page, but otherwise it does?

html

javascript

jquery

dom

window-load