Question

SCENARIO Web应用程序工作流程如下：

有人点击a href元素进入页面。的 http://example.org/
按照链接，然后到达网站中的另一个页面。的 http://example.org/page-2/
链接网址还包含哈希变量。

（这个哈希变量是我打算用来实现下一点的目的）

有一个内容网格必须显示想要的部分，这个对象是用开箱即用的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）时，该站点实际上不会重新加载。这是默认行为，因为它意味着跳转到页面上具有哈希值的元素。

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

'onhashchange'

现在，根据过滤的工作原理，您可能需要调用一个执行所有过滤的功能（在加载页面时执行过滤的功能），或者，如果这是服务器端CMS，您可能需要重新加载页面。

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

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

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

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

Answer 2

THE ANSWER

Somehow I was triggering the event before the handler was attached, despite the window.load event is supposedly intended to trigger functions when all the DOM is entirely loaded.

https://stackoverflow.com/a/2060275/1126953

Kudos to Noah.

Based on the previous answer I could manage to set the desired behavior as it follows:

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

Just a simple delay.

Many thanks for your time Stefan.

当请求来自页面外时，为什么window.load不起作用，否则它会起作用？

2 个答案: