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

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

本文关键字：外部 不起作用 起作用 情况下 其他 不是 load window 请求 为什么      更新时间：2023-09-26

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

  1. 有人将a href元素单击到页面中http://example.org/
  2. 点击链接，然后访问网站内的另一个页面http://example.org/page-2/
  3. 链接URL还包含一个散列变量

(这个hash var是我想要使用的，以实现下一点(

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

(这个过滤器完全基于事件，而不是"GUI可见"位置，因此我无法从url中调用特定的过滤器，前一个对象-有一个前一个物体，是的-与url中的哈希值配合得很好，但新的没有。(

  1. 内容网格过滤器元素没有任何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运行良好。内容网格显示的正是我想要的内容。

但当我试图从中的a href元素到达同一链接时http://example.org/它根本没有任何作用。

进一步解释

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

问题如下：从链接导航时http://example.org/page-2/#指向一个不同的链接，该链接是同一个页面，但具有不同的hash var，如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可见’位置"是什么意思，所以如果我误解了你，你可能想在评论中详细说明一下，但我希望这些解决方案中的任何一个都适用。

答案

不知怎的，我在附加处理程序之前就触发了该事件，尽管window.load事件应该是在所有DOM完全加载时触发函数的。

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

向诺亚致敬。

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

$( 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。

相关文章：