在你重写 Element.prototype.setAttribute
方法时,如果设置 src
属性后没有发起 HTTP 请求,可能是因为浏览器未能检测到属性值的变化。对于某些元素(如 <img>
或 <script>
),直接调用 setAttribute
不一定会引发重新加载或请求。
解决方案
直接修改属性: 在设置
src
、href
等属性时,可以直接操作对应的 DOM 属性,而不是通过setAttribute
来触发浏览器的行为。强制触发加载: 对于图片 (
<img>
) 元素,你可以在更改src
属性后,手动将其设置为一个空字符串,然后再将其设置回新值,以确保重新加载:
修改后的代码示例
(function() {
let originalSetAttribute = Element.prototype.setAttribute;
Element.prototype.setAttribute = function(attr, value) {
let newValue;
if (attr === "src" || attr === "href" || attr === "action") {
newValue = sdp_hookurl(value);
console.log("setAttribute url : ", value, " hook url : ", newValue, " attr : ", attr);
// 使用原生的属性来更新值以确保请求被发送
if (this.tagName.toLowerCase() === 'img' && attr === 'src') {
this.src = ""; // 先清空 src
this.src = newValue; // 再设置新的 URL,这样会强制浏览器加载
return; // 不需要继续调用 originalSetAttribute,因为已经处理过了
} else if (this.tagName.toLowerCase() === 'a' && attr === 'href') {
this.href = newValue; // 对于 <a> 标签,直接赋值即可
return;
}
}
// 调用原始的方法以处理其他情况
return originalSetAttribute.call(this, attr, value);
};
})();
解释
- 当你修改
src
时,会首先将其设为空字符串,这样就能强制浏览器识别出这是一个新的值,从而进行请求。 - 对于其他类型的标签,例如
<a>
标签,简单地直接给它的href
属性赋值也是有效的。
这样做应该能够保证你在钩子函数中处理 URL 后,浏览器能够正常发起 HTTP 请求。
内容由零声教学AI助手提供,问题来源于学员提问