内部请求时不应用 JS 样式更改

Question

我想让网站上的图像在找不到同一域上的某个文件时禁用其“onclick”事件并应用灰色过滤器。我想使用纯 JS，到目前为止已经尝试过：

function fileNonExist(url, callback){
        var http = new XMLHttpRequest();
        http.onreadystatechange = function() {
                if (http.readyState === XMLHttpRequest.DONE && callback) {
                        if(http.status != 200){
                                callback();
                        }
                }

        }
        http.open('HEAD', url);
        http.send();
}

fileNonExist("theFileIAmLookingFor.html", () => {
        console.log("image changed");
        image.onclick = "";
        image.style.filter = "grayscale(100%)";
});

我已经初始化并显示了图像。因此 image.onclick = "" 和 image.style.filter = "grayscale(100%) 如果正常使用，两者都有效。但是，即使功能块按预期执行（如果未找到文件，控制台会记录“图像已更改”，否则不会记录任何内容。）none 如果从这些块中执行，样式更改将永远可见.为什么会这样，我该如何解决？

Answer 1

我在与 Emiel Zuurbier 交谈时自己找到了解决方案：我注意到如果我在浏览器中正常打开 html 文件，代码就可以正常工作。如果我通过网络服务器访问文件，就会出现错误，我一直都在这样做。如果我在网站仍在浏览器中打开时关闭服务器，那么更改也会应用。如果我在浏览器中使用开发工具查看请求。我看到只有成功的请求正在完成，而不成功的请求永远悬而未决。这就是为什么在服务器关闭时应用更改并且所有未决请求因错误而关闭的原因。服务器使用 Node.js“fs”模块及其 readFile 方法。

我现在将尝试改变样式，使所有图像开始时都是灰色的，并且没有“onclick”方法，并且只有在找到文件后才会解锁。这样，带有待处理请求的图像将保持灰色。

内部请求时不应用 JS 样式更改

JS style-changes don't get applied when inside request

javascript

image

xmlhttprequest

fs

node.js