如何将事件绑定到 Squarespace AjaxLoader？答案

【问题标题】：How can I bind events to the Squarespace AjaxLoader?如何将事件绑定到 Squarespace AjaxLoader？
【发布时间】：2016-09-12 03:31:50
【问题描述】：

我目前正在一个 Squarespace 网站上工作，试图弄清楚如何将一个函数绑定到他们的 AjaxLoader 而没有太大的成功。

这是demo site that uses this loader

在我的控制台中，我可以看到在页面之间切换时触发的所有 XHR 请求，并且我尝试使用调试来捕获事件侦听器。

我认为绑定到“readystatechange”的东西会起作用，但它只会在初始页面加载时触发。

$(window).on("readystatechange", doStuff);

【问题讨论】：

下面的帖子有点相关。在答案的底部有关于完全禁用 AJAX 加载器的信息。这不是很理想，但取决于您要完成的工作，它可能会有一些用处：stackoverflow.com/a/38919264/5338581
@Brandon 谢谢——不过我并不是很想禁用它。我想出了一个使用绑定到 ui 点击事件的 setTimout 函数的解决方案。缓存页面 id，然后在它更改时中断。太丑了

标签： javascript jquery ajax squarespace

【解决方案1】：

我在 Squarespace Answers 论坛上找到了一个使用 mutationObservers 的非常好的解决方案 - 谢谢@octopus！

从here复制粘贴

希望这可以帮助其他正在苦苦挣扎的人。

 window.onload = function(){
   react();
   watch(react);
 };
 function react() {
   var id = document.body.getAttribute('id'),
       target = 'collection-5787c6b0cd0f6801e859286a';
   console.log(id);
   if (id === target) {
     // execute your code for this page
   }
 }
 function watch(callback) {
   MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
   var observer = new MutationObserver(function(mutations) {
     for (var index = 0; index < mutations.length; index++) {
       var mutation = mutations[index];
       if (mutation.type === 'attributes') { 
         callback();
       }
     }
   });
   observer.observe(document.body, {
     attributes: true,
     attributeFilter: ['id']
   });
 }

【讨论】：

【解决方案2】：

ajaxLoader.js 使用的是modular pattern 并封装了httpRequest。我不相信你可以绑定它。

  (function(window, document){
    'use strict';

     var DEBUG = true;
     var httpRequest; // THE HTTP REQUEST USED FOR THE AJAX
     var ajaxFired = false;
     var currentEvent;
     var currentTarget;
     var indexNextAnim = true;
     ...

在ajax函数中设置并使用httpRequest：

ajax: function (url) {

  httpRequest = new XMLHttpRequest();
  httpRequest.open('GET', url);
  httpRequest.timeout = this.TIMEOUT;
  httpRequest.onreadystatechange = this.handleRequest.bind(this, url);
  httpRequest.ontimeout = this.handleTimeout.bind(this, url);
  httpRequest.send(null);
},

【讨论】：

嗯，这很烦人。您对更改后的页面内容有什么建议吗？
如果您使用 jQuery，您也许可以使用Global Ajax Event Handlers。但是，对于不使用 jQuery 库的 ajax 调用，我并不肯定。

【解决方案3】：

这很容易解决。只需修改 AjaxLoader 原型，在 Squarespace 运行自己的块初始化的位置旁边添加一个额外的自定义初始化函数。

这假设您已经绑定了某种自定义对象来保存您的 init 函数。有时为了更好地使用某种自定义事件发射器，但这将是一些额外的开发。这似乎容易多了。

 window.onload = function() {
   this.AjaxLoader.prototype.initializeSqsBlocks = function () {
     window.SQS.Lifecycle.init();

     console.log( "Foo!" );
     window.CUSTOM.YourCustomInitFunction();
   }
 };

最终结果是，当 ajaxloader 触发时，它会像往常一样触发 initializeSqsBlocks init，您现在已经劫持了它以添加您自己的额外 init 函数。这是一种将发射器附加到 ajaxloader 而无需过多修改的临时方法。

【讨论】：

哇，这是一个了不起的解决方案——谢谢！
编辑——Squarespace 更新了一些东西，这个方法不再有效。