1

htmlにおいてmeta_refreshを用いてウェブページを自動更新しているんですが、更新の空白をなくす方法はないんでしょうか。

非同期通信もちいてなんとかする方法を思いついたのですが初習のため難航しております。
他の方法があるか、非同期通信についてアドバイスいただけないでしょうか。

1 件の回答 1

1

htmlを更新するとどうしても更新の空白ができてしまいます。更新の空白をなくすためには、いわゆるAjaxと呼ばれる方法で、非同期通信しながら動的にページの一部を書き換えるようにします。

Ajaxの説明は長くなるし、いろいろ書き方があるので、ここではES2017でサンプルだけを書いておきます。data.jsonを変更すると、ページの表示も変わります。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="hello">Hello, World!</p>
</body>
<script>
    var refresh = async() => {
        const response = await fetch('data.json', {"cache":"no-cache"});
        const json = await response.json();
        const element = document.getElementById("hello");
        element.innerText =json.item1;
    };

    setInterval(refresh, 1000);
</script>
</html>

data.json

{
  "item1":"Hello, everyone!"
}

なお、Internet Explorer 11ではES6以降のJavaScriptはBabel等でES5にトランスパイルしないと動作しません。Internet Explorer 11ですぐに動作するようにしたいのであればjQueryを使ってください。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。