Javascript 如何将事件绑定到Squarespace AjaxLoader？

目前我正在一个Squarespace站点上工作，试图弄明白如何将函数绑定到他们的AjaxLoader，但没有多大成功

这是一个

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

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

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

正在使用并封装了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;
     ...

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

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);
},

---

我在Squarespace Answers论坛上找到了一个非常好的使用MutationObserver的解决方案–谢谢

复制粘贴自

希望这能帮助其他挣扎的人

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

window.onload=function（）{
反应（）；
观察（反应）；
};
函数react（）{
var id=document.body.getAttribute（'id'），
目标='collection-5787c6b0cd0f6801e859286a'；
console.log（id）；
如果（id==目标）{
//执行此页面的代码
}
}
函数监视（回调）{
MutationObserver=window.MutationObserver | | window.webkit MutationObserver；
var观察者=新的突变观察者（功能（突变）{
对于（var指数=0；指数<0.length；指数++）{
var突变=突变[指数]；
如果（mutation.type==='attributes'）{
回调（）；
}
}
});
观察者，观察者（文件主体{
属性：正确，
attributeFilter:['id']
});
}

这很容易解决。只需修改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的临时方法，而无需对其进行太多修改。

嗯，这很烦人。在页面内容被更改后，您对我如何操作页面内容有什么建议吗？如果您使用jQuery，您可能可以使用。但是，我不确定这是否适用于不使用jQuery库的ajax调用。答案的底部是关于完全禁用AJAX加载程序的信息。这并不是很理想，但取决于你想完成什么，它可能会有一些用处：@Brandon谢谢你——不过我并不想让它失效。我提出了一个解决方案，使用绑定到ui单击事件的setTimout函数。缓存页面id，然后在其更改时中断。太难看了哇，这是一个令人惊奇的解决方案-谢谢！编辑–Squarespace已更新某些内容，此方法不再有效。