小賴的實戰記錄

因為要偵測網站是否活著，所以要使用一些方法確認網站，

網路用了偵測圖片的方式

http://stackoverflow.com/questions/5224197/javascript-check-if-server-is-online

http://stackoverflow.com/questions/4814752/whats-the-best-way-to-check-if-a-website-is-up-or-not-via-javascript

利用小圖，來判定該網站是否活著。

我改寫了，然後自己實際使用可行。

但需要對每個網站做個小動作（如果是自己的網站）就是放一張小圖處理。

    <script>
        function ifServerOnline(webSite,ifOnline, ifOffline)
        {
            var img = document.body.appendChild(document.createElement("img"));
            img.onload = function()
            {
                ifOnline && ifOnline.constructor == Function && ifOnline();
            };
            img.onerror = function()
            {
                ifOffline && ifOffline.constructor == Function && ifOffline();
            };
            img.src = webSite;     
            $(img).css('visibility','hidden')
        }
    </script>

ifServerOnline('http://localhost/test/images/loding.gif',function(){alert('online')}, function(){alert('offline')});

最後，用圖片還有一個缺點，

就是 如果是timeout問題，就會因為等圖撈太久，而偵測過久的問題。

所以另外又做了一個，圖片timeout時的處理。

為什麼用image來偵測呢？因為ajax，有跨網域問題，image就沒有被限制，如果用iframe，也有跨網域，無法取得內容問題。

要判斷404或網站沒有相對網址或controller  可用image 就馬上立馬知道，網站是存在的，但不存在就會等過久，等到timeout，

所以image另外搭配setTimeout來處理，

http://stackoverflow.com/questions/8659364/how-to-cancel-an-image-load-after-a-period-of-time

這篇文章有說明如何設定image timeout的處理。

改寫成下面這種方式處理

           var timer;
            function clearTimer() {
                if (timer) {                
                    clearTimeout(timer);
                    timer = null;
                }
            }

            function handleFail() {
                alert('offline ');
                // kill previous error handlers
                this.onload = this.onabort = this.onerror = function() {};
                // stop existing timer
                clearTimer();
                /*
                // switch to alternate url
                if (this.src === url) {
                    this.src = altUrl;
                }
                */
            }

            var img = document.body.appendChild(document.createElement("img"));
            img.onerror = img.onabort = handleFail;

            img.onload =  function()
            {
                clearTimer();
                alert('online');
            };

            img.onerror = function()
            {
                alert('offline ');
            };


            img.src = webSite + '/image/logo.gif';

            $(img).css('visibility','hidden');
            timer = setTimeout(function(theImg) { 
                return function() {
                    handleFail.call(theImg);
                };
            }(img), 1000);