私は、いくつかの外部Webサイトへのリンクである写真を含むHTML Webサイトを持っています。私の仕事は、外部のウェブサイトがダウンしているかどうかを示すことです。つまり、ウェブサイトでpingが可能な場合は、ウェブサイトを表すロゴを表示します。ウェブサイトがダウンし、pingできない場合は、赤い十字が表示されます。Webページ(HTML)でモニタリング機能を実装する
これは実装できますか?
次の仕事ができる私は、いくつかの外部Webサイトへのリンクである写真を含むHTML Webサイトを持っています。私の仕事は、外部のウェブサイトがダウンしているかどうかを示すことです。つまり、ウェブサイトでpingが可能な場合は、ウェブサイトを表すロゴを表示します。ウェブサイトがダウンし、pingできない場合は、赤い十字が表示されます。Webページ(HTML)でモニタリング機能を実装する
これは実装できますか?
次の仕事ができる:
<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秒タイマーを設定し、画像がまだロードされていない場合は、その画像を使用できない画像に交換します。この方法の唯一の問題は、元のイメージの検索とタイマーの期限切れとの間の中間の期間に、「壊れたイメージ」アイコンが表示されることです。
あなたの入力に感謝します。いくつかの試みの後、私はあなたのロジックにインスピレーションを得て、私が欲しかったものを成し遂げました:)。私はonerrorイベントを使用して終了しました。 – emo
私はそれを実装することはできないと思います。
ウェブサイトに「ping」するときは、ajaxリクエストを送信します。
URLがパブリックWeb APIであれば動作します。 もしそうでなければ、クロスオリジンの問題を満たすでしょう。
あなたは今までに書いたコードを教えてください。 –
AJAXを使用してページを取得しようとするとかなり簡単です。成功すると、失敗した場合には、物Aを行います。このサイトは既存のコードに関する問題ですので、最初に試してみてください。 –
これを見てみてください:http://stackoverflow.com/questions/4282151/is-it-possible-to-ping-a-server-from-javascript – Kingsthor