2

私はいくつかの html/js/css と画像をブラウザーベースのクライアントに提供する C# Web サーバーを持っています。

websocket C# サーバーからメッセージを受信しながら、javascript を使用して動的にページを作成し、画像と div を埋めます。

ときどき、WebSocket からメッセージを受け取り、保護されている可能性のある Web サーバー内のリソースにアクセスしようとします。

これにはいくつかのカスタム http サーバー イベント (406 など) があります。

すべての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);
}




//
4

1 に答える 1

1

onerror は何が失敗したかを教えてくれないので、それを見つけるためだけに XHR を作成する必要があります。それは些細なことだ

最初に XHR を試すことができます。失敗した場合は、何が起こったかがわかります。成功した場合は、キャッシュから画像を表示できます (こちらも参照)。もちろん、特別なステータス コード用にグローバルに定義されたカスタム フックを呼び出すようにすることもできますが、手動で呼び出す必要があります。定義済みのグローバル イベント ソースはありません。

ページに画像を配置する必要があるたびに wrapUrlInErrorHandler 関数を使用しないように、document.onerror ハンドラーのようなものが必要です。

それ無理。errorイベント ( MDN、MSDN )はバブリングせず、<img>要素でのみ直接発生します。wrapUrlInErrorHandlerただし、インライン イベント属性を使用せず、(従来の) 高度なイベント処理を使用すると、この醜い問題を回避できます。

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);
}
于 2012-12-18T15:51:10.363 に答える