如何将事件绑定到 Squarespace AjaxLoader？

Question

我目前正在 Squarespace 网站上工作，试图找出如何将函数绑定到他们的 AjaxLoader 但没有取得太大成功。

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

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

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

Answer 1

ajaxLoader.js is using the 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);
},

Answer 2

我在 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']
   });
 }

Answer 3

这很容易解决。只需修改 AjaxLoader 原型即可在 Squarespace 运行其自己的块初始化的地方添加一个额外的自定义初始化函数。

这假设您已经绑定了某种包含您的 init 函数的自定义对象。有时最好为此使用某种自定义事件发射器，但这将是一些额外的开发。这看起来容易多了。

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

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

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

如何将事件绑定到 Squarespace AjaxLoader？

How can I bind events to the Squarespace AjaxLoader?

javascript

jquery

ajax

squarespace