要hook所有给 <base href>
赋值的操作,你可以通过重写 HTMLBaseElement
的 href
属性来实现。这样,每次对 <base>
标签的 href
属性进行赋值时,都会触发你自定义的代码。
下面是一个示例代码,演示如何在 JavaScript 中实现这个功能:
// 保存原始的 Base 元素
const originalBase = document.querySelector('base');
// 如果没有找到 base 元素,则创建一个
if (!originalBase) {
const base = document.createElement('base');
document.head.appendChild(base);
}
// 使用 Object.defineProperty 来 hook href 属性
Object.defineProperty(HTMLBaseElement.prototype, 'href', {
set: function (value) {
console.log(`Setting base href to: ${value}`);
// 在这里可以加入自定义逻辑
// 调用原有设置
originalBase.setAttribute('href', value);
},
get: function () {
return originalBase.getAttribute('href');
},
});
// 测试:设置 base href
document.querySelector('base').href = 'https://example.com/';
注意事项
确保存在
<base>
标签:在某些情况下,页面可能没有<base>
标签。在上述代码中,我添加了检查以确保如果不存在则创建一个。性能考虑:这种方法会对每一次对
href
的访问和修改都进行拦截,因此请考虑性能影响。浏览器兼容性:这种方式适用于大多数现代浏览器,但请测试确保在特定环境中的表现一致性。
解除 Hook:如果需要恢复默认行为,可以保存原来的方法,并在需要的时候重新分配回去。
这段代码会输出任何尝试改变 <base href>
的操作到控制台,并且可以让你在此基础上扩展其他逻辑,比如验证路径或记录变更等。
内容由零声教学AI助手提供,问题来源于学员提问