2016-09-21 9 views
-1

私は、いくつかの外部Webサイトへのリンクである写真を含むHTML Webサイトを持っています。私の仕事は、外部のウェブサイトがダウンしているかどうかを示すことです。つまり、ウェブサイトでpingが可能な場合は、ウェブサイトを表すロゴを表示します。ウェブサイトがダウンし、pingできない場合は、赤い十字が表示されます。Webページ(HTML)でモニタリング機能を実装する

これは実装できますか?

次の仕事ができる
+0

あなたは今までに書いたコードを教えてください。 –

+0

AJAXを使用してページを取得しようとするとかなり簡単です。成功すると、失敗した場合には、物Aを行います。このサイトは既存のコードに関する問題ですので、最初に試してみてください。 –

+3

これを見てみてください:http://stackoverflow.com/questions/4282151/is-it-possible-to-ping-a-server-from-javascript – Kingsthor

答えて

1

<img id="image" src="http://externalsite.com/foo.png"> 

const image = document.getElementById('image'); 
let loaded = false; 

function swapImage() { image.src = '/not-available-image.png'; } 

image.addEventListener('load',() => loaded = true); 

setTimeout(() => { 
    if (!loaded) swapImage(); 
    } 
}, 3000); 

これはloadイベントのイベントリスナーを設定し、それが発火するときにtrueにloaded変数を設定します。次に、3秒タイマーを設定し、画像がまだロードされていない場合は、その画像を使用できない画像に交換します。この方法の唯一の問題は、元のイメージの検索とタイマーの期限切れとの間の中間の期間に、「壊れたイメージ」アイコンが表示されることです。

+0

あなたの入力に感謝します。いくつかの試みの後、私はあなたのロジックにインスピレーションを得て、私が欲しかったものを成し遂げました:)。私はonerrorイベントを使用して終了しました。 – emo

0

私はそれを実装することはできないと思います。

ウェブサイトに「ping」するときは、ajaxリクエストを送信します。

URLがパブリックWeb APIであれば動作します。 もしそうでなければ、クロスオリジンの問題を満たすでしょう。

関連する問題