用户脚本检测页面加载失效？Turbolinks场景下的解决方案

我最近在给一款浏览器游戏编写用户脚本，用来修改它的UI界面，结果碰到了个棘手的问题：每次页面导航之后，我添加的自定义UI元素就消失了。

一开始我试了好几种常规的页面加载检测方法，想在页面加载完成后重建UI，但这些方法全都没触发：

• $(window).on("load", function(){ console.log("loaded new page"); });
• $(document).ajaxComplete(function(){ console.log("loaded new page"); });
• $(window).on("hashchange", function(){ console.log("loaded new page"); });

我的脚本已经配置了正确的@match规则：

@match *://talibri.com/*
@match *://www.talibri.com/*

后来仔细排查才发现，这个网站用了Ruby on Rails的Turbolinks——它会让页面在导航时不重新加载整个文档，而是只替换页面的部分内容，这就导致常规的load这类事件根本不会触发。

找到问题根源后，我绑定了Turbolinks专属的turbolinks:load事件，终于解决了问题：

$(window).on("turbolinks:load", function(){ console.log("loaded new page"); });

如果想要兼容普通页面加载和Turbolinks加载两种场景，可以把两个事件绑定在一起：

$(window).on("load turbolinks:load", function(){ console.log("loaded new page"); });

内容的提问来源于stack exchange，提问作者Alexander