记录一次脚本加载Issue修复

这不是一篇非常长的内容，就当填补一下太久没写文章的空窗期。

在浏览V2EX_Polish的仓库时遇到这么一个Issue。总结就是出现了一个只有Safari会遇到的问题，而且触发与否还跟页面有关。

这就有意思了，为什么一个脚本会有的页面能加载有的又不行呢？

我之前从来没接触过网页脚本，不过溯源一下就可以发现，脚本主体需要在DOMContentLoaded事件触发后才执行，而失败的原因也就是因为该事件没有触发，或者触发后才执行的监听注册。

if (typeof window.GM_addStyle !== "undefined") {
    window.GM_addStyle(style);
} else {
    document.addEventListener("DOMContentLoaded", () => {
        $(`<style type='text/css'>${style}</style>`).appendTo("head");
    });
}

知道问题就好解决了，只需要多判断一步当前的document.readyState是否不为loading就好。

function runAfterLoaded(fn) {
    if (document.readyState !== "loading") {
        fn();
    } else {
        document.addEventListener("DOMContentLoaded", () => {
            fn();
        });
    }
}
if (typeof window.GM_addStyle !== "undefined") {
    window.GM_addStyle(style);
} else {
    runAfterLoaded(() => {
        $(`<style type='text/css'>${style}</style>`).appendTo("head");
    });
}

问题是解决了，但是为什么会导致这种问题呢？又是所谓的浏览器兼容问题？

在经过多次测试后，我得出以下结果：

• Chrome也存在DOMContentLoaded触发后才执行监听代码的情况。但问题只在Safari上出现的原因仅仅只是因为Safari用的Userscripts插件缺少油猴系的GM_addStyle方法。
• 至于为什么有的页面行有的页面不行，区别在于行的页面都会多执行一个HTTP Status Code为204的跟踪请求，而这延后了DOMContentLoaded的触发时机。

难得的一次Safari没有锅的兼容性问题。