使用 static html 页面自动刷新 div 内容

Question

I want to reload html div tag in every 5 minutes which call.js file in it without refresh entire page.

<div id="pie">
  <script src="index.js">// reload in every 5 minutes
     </script>
 </div>

Answer 1

If you are looking to get the script to refresh without reloading the entire page, try using an XHR for asynchronous loading, and then - shudder - use the eval function to run your new javascript only if you trust the content in the script because the eval function can be badly misused by your client for XSS attacks.

Here is an example of a 5-minute interval in which the script is gathered and run each time (remember this will only work if your file is on the same website abiding by the CORS policy)

setInterval(function () {

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:
       eval(xhr.responseText); //ONLY IF YOU TRUST THE FILE
    }
};
xhr.open("GET", "index.js", true);
xhr.send();

}, 5 * 1000);

Check out this website for more information on XMLHttpRequests: https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp

They even have tips on how to avoid cached files