记录一次脚本加载Issue修复
更新于 2024-05-18
这不是一篇非常长的内容,就当填补一下太久没写文章的空窗期。
在浏览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没有锅的兼容性问题。
Powered by Waline v2.15.6