(function() { let originalSetAttribute = Element.prototype.setAttribute; Element.prototype.setAttribute = function (attr, value) { let newValue; if(attr === "src" || attr === "href" || attr =...-Go服务器开发

在你提供的代码中，重写了 Element.prototype.setAttribute 方法，以便在设置某些属性（如 src、href 和 action）时进行一些自定义处理。这个方法会在修改这些属性时替换其值，并可能导致浏览器未能正确发起 HTTP 请求。

问题原因

重写 setAttribute 方法后，使用 JavaScript 直接修改这些属性的值可能不会触发浏览器原生的行为（例如请求加载图片或导航到新的 URL）。这是因为很多 HTML 元素的行为依赖于这些属性被“原生”地设置，而不是通过 setAttribute 方法。

解决方案

为了解决这个问题，可以尝试以下方法：

手动触发相关事件：在设置完新的值后，手动触发相应的事件。例如，如果你是为 <img> 标签更改 src 属性，你可以手动创建一个加载事件：

   if (attr === "src" || attr === "href" || attr === "action") {
       newValue = sdp_hookurl(value);
       console.log("setAttribute url : ", value, " hook url : ", newValue);
       // 对于 <img> 元素，重新加载图像
       if (this.tagName.toLowerCase() === 'img' && attr === 'src') {
           this.src = newValue; // 这将确保图像被加载
           return; // 不再调用 originalSetAttribute
       }
   }

使用对象属性赋值：当需要使用这种方式操作 DOM 元素时，可以直接使用对象的属性来设置，而不只是依赖于 setAttribute。比如：

   this[attr] = newValue;

保持原有行为：调用原始的 setAttribute 后，还需要确保元素能够自行处理这些 URL，比如执行一次网络请求。可以考虑补充一个逻辑来检测并重载内容。

修改后的示例代码

(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);
            // 使用对象属性赋值而非 setAttr
            this[attr] = newValue;
            // 如果是 img 标签，强制刷新一下 src 来触发请求
            if (this.tagName.toLowerCase() === 'img' && attr === 'src') {
                this.src = newValue; 
            }
            return; // 阻止继续调用原始的方法以避免重复调用
        }
        
        return originalSetAttribute.call(this, attr, value); // 确保其他属性正常工作
    };
})();