I am developing a local site for a pany (only local internal use, offline and without server). I have a main page that has a main div, that contain 3 different div. Each div is linked to a page and the "onclick" event of each div will load the page linked into the main div. So i have to check, with the document ready function, if each page exists and, if not, I want to delete the div linked to that page. How can I check if a page exist locally? I've found many answere that check with status of connection if a page exists, but my html will only work offline and locally, so I can't use that method.

EDIT - SOLVED

I've solved this using the script of @che-azeh:

function checkIfFileLoaded(fileName) {
    $.get(fileName, function(data, textStatus) {
        if (textStatus == "success") {
            // execute a success code
            console.log("file loaded!");
        }
    });
}

If the file was successfully load, i'd change the content of a new hidden div that will tell to another script if it have to remove or not each of the three div.

I am developing a local site for a pany (only local internal use, offline and without server). I have a main page that has a main div, that contain 3 different div. Each div is linked to a page and the "onclick" event of each div will load the page linked into the main div. So i have to check, with the document ready function, if each page exists and, if not, I want to delete the div linked to that page. How can I check if a page exist locally? I've found many answere that check with status of connection if a page exists, but my html will only work offline and locally, so I can't use that method.

EDIT - SOLVED

I've solved this using the script of @che-azeh:

function checkIfFileLoaded(fileName) {
    $.get(fileName, function(data, textStatus) {
        if (textStatus == "success") {
            // execute a success code
            console.log("file loaded!");
        }
    });
}

If the file was successfully load, i'd change the content of a new hidden div that will tell to another script if it have to remove or not each of the three div.

• javascript
• jquery
• html

• Offline means no internet connection then you can only check about the files on your local web server & not the outside world's – techie_28 Commented Jul 27, 2016 at 7:26
• i have no local web server. it's a local site. i have html pages in directories, like they are .txt file. no web server, no connection, nothing. I only use pages linked with absolute path – Federico Pessina Commented Jul 27, 2016 at 7:27
• you mean you are running that file in your browser with a URL like file:///C:/xxx/xxx/fileCheck.html or how ? – techie_28 Commented Jul 27, 2016 at 7:29
• yes, exactly. and I have to check if file:///C:/xxx/xxx/page2.html exists – Federico Pessina Commented Jul 27, 2016 at 7:30
• but your pany would be running that on a web server,they wont be accessing like that URL ? – techie_28 Commented Jul 27, 2016 at 7:33

5 Answers 5

This function checks if a file can load successfully. You can use it to try loading your local files:

function checkIfFileLoaded(fileName) {
    $.get(fileName, function(data, textStatus) {
        if (textStatus == "success") {
            // execute a success code
            console.log("file loaded!");
        }
    });
}
checkIfFileLoaded("test.html");

I suggest you run a local web server on the client's puter. (See also edit below on local XHR access).

With a local web server they can start it up as if it was an application. You could for example use node's http-server. You could even install it as an node/npm package, which makes deployment also easier.

By using a proper http server (locally in your case) you can use xhr requests:

$(function(){
    $.ajax({
        type: "HEAD",
        async: true,
        url: "http://localhost:7171/myapp/somefile.html"
    }).done(function(){
        console.log("found");
    }).fail(function () {
        console.log("not found");
    })
})

EDIT:

Firefox

Another post has (@che-azeh) has brought to my attention that firefox does allow XHR on the file "protocol". At the time of this writing the above works in firefox using a url of just somefile.html and using the file scheme.

Chrome

Chrome has an option allow-file-access-from-files (http://www.chrome-allow-file-access-from-file./). This also allows local XHR request This flag is intended for testing purposes:

you should be able to run your tests in Google Chrome with no hassles

I would still suggest the local web server as this make you independent of these browser flags plus protect you from regression once firefox/chrome decide to disable support for this.

You can attempt to load the page within a try-catch construct. If the page exists, it will be loaded though. If it doesn't, you can (within the catch) set the related div as hidden.

Try to access the page using $.ajax. Use the error: option to run a callback function that removes the DIV linked to the page.

$.ajax({
    url: "page1.html",
    error: function() {
        $("#page1_div").remove();
});

You can loop this code over all the DIVs.

You can use jquery load function

$("div").load("/test.html", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $(this).html(msg + xhr.status + " " + xhr.statusText);
  }
});