How to refresh a page whenever my json data file changes

前端 未结 5 446
甜味超标
甜味超标 2020-12-29 14:26

So I\'ve got this local file named \'data.json\' containing various data. I want to refresh my page only when some data in the json file changes. Appreciate your help if you

5条回答
  •  情话喂你
    2020-12-29 15:02

    Check this stackOverflow question and answer

    Is it possible to retrieve the last modified date of a file using Javascript?

    If it's on the same server as your calling function you can use XMLHttpRequest-

    This example is not asynchronous, but you can make it so if you wish.
    
    function fetchHeader(url, wch) {
        try {
            var req=new XMLHttpRequest();
            req.open("HEAD", url, false);
            req.send(null);
            if(req.status== 200){
                return req.getResponseHeader(wch);
            }
            else return false;
        } catch(er) {
            return er.message;
        }
    } 
     alert(fetchHeader(location.href,'Last-Modified'));
    

    Refresh a page using javascript or html

    Ways to refresh Page Here are the first 20:

    location = location
    location = location.href
    location = window.location
    location = self.location
    location = window.location.href
    location = self.location.href
    location = location['href']
    location = window['location']
    location = window['location'].href
    location = window['location']['href']
    location = window.location['href']
    location = self['location']
    location = self['location'].href
    location = self['location']['href']
    location = self.location['href']
    location.assign(location)
    location.replace(location)
    window.location.assign(location)
    window.location.replace(location)
    self.location.assign(location)
    and the last 10:
    
    self['location']['replace'](self.location['href'])
    location.reload()
    location['reload']()
    window.location.reload()
    window['location'].reload()
    window.location['reload']()
    window['location']['reload']()
    self.location.reload()
    self['location'].reload()
    self.location['reload']()
    self['location']['reload']()
    

    So simply Combine two and two together you get what you want

    If you want to periodically check that

    setInterval(function(){ 
    //the function here 
    and compare and update last_mod_date var if there changes else keep it like that
    
    }, 3000);
    

    Reference date comparison Example Mozilla

    var
    
        nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")),
        nLastModif = Date.parse(document.lastModified);
    
    if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
        document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
        if (isFinite(nLastVisit)) {
            alert("This page has been changed!");
        }
    }
    

提交回复
热议问题