javascript - 有没有办法将一些 HTTP 服务器事件传送到单个 javascript 函数中？

Question

我有一个 C# 网络服务器，它向基于浏览器的客户端提供一些 html/js/css 和图像。

我使用 javascript 动态创建页面，填充图像和 div，同时从 websocket C# 服务器接收消息。

有时，我从 websocket 收到一条消息，我尝试访问 web 服务器中可能 protected 资源。

我对此有一些自定义的 http 服务器事件(比如 406)，否则 the browser pops up a dialog box for digest auth login .

我想知道是否有一种方法可以将所有 406 事件引导到同一个函数中，比方说

RegisterHttpEventHandler(406,myFunction);

我想我可以将任何请求/动态负载包装在 try 和 catch 中，尽管我喜欢更简洁的方法。

编辑

这是我目前实现的工作流程示例，效果很好。

// Websocket definition
var conn = new WebSocket('ws://' + addressIP);
// Websocket receiver callback

conn.onmessage = function (event) {
        // my messages are json-formatted
        var mObj = JSON.parse(event.data);
        // check if we have something nice
        if(mObj.message == "I have got a nice image for you"){
        showImageInANiceDiv(mObj.ImageUrl);
        }
    };

// Dynamic load image
function showImageInANiceDiv(imgUrl )
{
    var imgHtml = wrapUrlInErrorHandler(imgUrl);
    $("#imageBox").html(imgHtml);
}    

// function to wrap everything in an error handler
function wrapUrlInErrorHandler(Url)
{
    return '<img src="' + Url + '" onerror="errorHandler(\''+ Url +'\');"/>';
}

// function to handle errors
function errorHandler(imgUrl)
{
     console.log("this guy triggered an error : "  + imgUrl);
}




//

Answer 1

the onerror does not tell me what failed, so I have to make an XHR just to find it out. That's a minor thing

您可以先尝试 XHR。如果失败，您知道发生了什么，如果成功，您可以显示缓存中的图像(另请参见 here )。当然，您也可以让它为特殊状态代码调用一些全局定义的自定义 Hook - 但您需要手动调用它，没有预定义的全局事件源。

I'd like to have something like a document.onerror handler to avoid using the wrapUrlInErrorHandler function every time I have to put an image in the page

那是不可能的。 error事件 ( MDN , MSDN ) 不冒泡，它直接触发并且只在 <img> 上触发元素。然而，你可以避开那个丑陋的 wrapUrlInErrorHandler如果您没有使用内联事件属性，而是使用 (traditional) advanced event handling :

function showImageInANiceDiv(imgUrl) {
    var img = new Image();
    img.src = imgUrl;
    img.onerror = errorHandler; // here
    $("#imageBox").empty().append(img);
}
// function to handle errors
function errorHandler(event) {
     var img = event.srcElement; // or use the "this" keyword
     console.log("this guy triggered an "+event.type+": "  + img.src);
}