例如pixiv、twitter等网页,本质是单页面应用,进入不同页面时通过js修改dom实现页面内容的替换,本质上页面没有刷新,油猴脚本也就不会重新加载。想要实现脚本菜单随页面变化进行判断和改变,一种思路是在页面url变化时,执行判断代码。修改页面url而不刷新页面的实现是history.pushState()
,在其中添加Event并触发,并添加EventListener即可。
var _wr = function (type) {
var orig = history[type];
return function () {
var rv = orig.apply(this, arguments);
var e = new Event(type);
e.arguments = arguments;
window.dispatchEvent(e);
return rv;
};
};
history.pushState = _wr('pushState');
window.addEventListener('pushState', function (e) {
console.warn(href changed to ${window.location.href}
);
// your code here
// 在这里加入你要执行的代码
});
可实现下面的效果: