Clever Geek Handbook

Javascript check if html file exists

How to check if a .html file exists in a folder? I am trying not to get the error "It may have been moved or deleted." and display notFound.html instead

<body>
    <header>    
        <form autocomplete="off">
            <input id="3Digits" type="number" min="100" placeholder="3-Digit Code">
            <span style="display:inline-block; width: 15px;"></span>
            <a href="#" id="goButton" onclick="check()">Go</a>
            <hr>
        </form>
    </header>
    <div id="frameDiv">
        <iframe id="srcCC"></iframe>
    </div>
    <script>
        var newLink
        function check() {
        newLink = document.getElementById("3Digits").value + ".html";
            if(newLink == ".html") {
                alert("You forgot to put the 3-Digit Code");
            }
            else {
                LinkCheck(newLink);
            }
        }
        function LinkCheck(url) {

            if(HTML EXISTS) {
                document.getElementById("frameSRC").src = newLink;
            }
            else {
                document.getElementById("frameSRC").src = "notFound.html";
            }
        }
    </script>
</body>

The LinkCheck function is what I'm asking for, all files will be in the same directory. This is a small school project, so any help would be appreciated!

+3


source to share


3 answers


You can use XMLHttpRequest

to check if a file exists



function LinkCheck(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}
+1


source


Replace the function like this:

function LinkCheck(url) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.onload = function(e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        document.getElementById("frameSRC").src = newLink;
      } else {
        document.getElementById("frameSRC").src = "notFound.html";
      }
    }
  };
  xhr.send(null);
}


Option 2: use jQuery ajax

    function LinkCheck(url) {
      $.ajax({
        url: url,
        success: function(data) {
          document.getElementById("frameSRC").src = newLink;
        },
        error: function(data) {
          document.getElementById("frameSRC").src = "notFound.html";
        },
      })
    }
0


source


Try replacing the LinkCheck function like this:

function LinkCheck(url) {

  const http = new XMLHttpRequest();
  http.onreadystatechange = function() {

    if (this.readyState === 4 && this.status === 200) { // if (HTML EXISTS) 
      document.getElementById("frameSRC").src = newLink;
    } else {
      document.getElementById("frameSRC").src = "notFound.html";
    }
  }

  http.open('get', url, true);
  http.send();

}

If this suggests some kind of deprecation issue, try the new fetch API javascript:

function LinkCheck(url) {

  fetch(url).then(function(response) {
    if (response.status === 200) {
      document.getElementById("frameSRC").src = newLink;
    } else {
      // this else isn't needed but you can put it here or in the catch block
      document.getElementById("frameSRC").src = "notFound.html";
    }
  })
  .catch(function (err) {
    throw err;
  });  
}
-1


source






More articles:


All Articles