Understanding How to Avoid Blanking During Updates While Reloading a Web Page

I automatically update the web page using meta_refresh in html. Is there any way to eliminate the update space?

I came up with a way to do something with asynchronous communication, but I'm having a hard time because of my first lesson.
Is there any other way or could you advise me on asynchronous communication?

javascript html

2022-09-30 11:51

1 Answers

If you update html, there will be a blank update.To eliminate the update space, try to dynamically rewrite parts of the page while communicating asynchronously, in a so-called Ajax.

The Ajax description is long and there are many ways to write it, so I'll just write a sample in ES2017.Changing data.json also changes the page display.

index.html

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

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

data.json

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

In Internet Explorer 11, JavaScript after ES6 must be transferred to ES5 using Babel etc. If you want Internet Explorer 11 to work immediately, use jQuery.

2022-09-30 11:51

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656