0

I am writing a local html family tree. Since the site is supposed to contain many personal pages that will take me a long to write, I want my browser to display in grey the links to the pages that have still not been created (everything here is on the server side in the project directory). It seemed it was only a matter of checking if a file existed and changing the colour of the link with javascript, but it turned out to be much more complicated than I thought. I read several solutions in google to check if a file exists, and all of them failed. One of them is the following:

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

This failed. Then I tried to debug, and change the function to:

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

This should have worked unconditionally since the function returns "false" in any case. But this one failed too. Then I disabled the "send" part:

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

An this worked! So, the problem is the function http.send() that causes a failure. Any insight?

Note: I tried with Firefox and Chrome, with the same results.

EDIT 1: The JavaScript code that actually uses this function is:

if (LinkCheck("Abraham_page.html")){} else {
  document.getElementById("Abraham_link_id").style.color = "gray";
}

Where "Abraham_page.html" may be located inside the same directory as the page containing the calling function (but actually don't exist).

Edit 2: I'm not use to the debugger tool, but it seems the relevant message is:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Tex-Dir/Tex_Work/User/html/genealogy/Abraham_page.html. (Reason: CORS request not http).
Md. Rakibul Islam
  • 2,140
  • 1
  • 7
  • 14
MikeTeX
  • 529
  • 4
  • 18
  • `send` is only used with asynchronous requests. You specifically asked for a synchronous request. – Tim Roberts Aug 06 '23 at 06:42
  • @TimRoberts — That’s wrong. `send` is used for *all* XHR requests. – Quentin Aug 06 '23 at 06:43
  • [“failed”](https://idownvotedbecau.se/itsnotworking/ ) isn’t a useful description of the problem. You need to do some debugging and report on the actual behaviour of your code. I assume that if you open the developer tools in your browser and look at the Console you will see an error message that indicates you are trying to use HTTP requests on a `file:` scheme URL and are hitting cross-origin restrictions … but there’s no enough information in the question to be sure. – Quentin Aug 06 '23 at 06:45
  • OK. I am new in html and I'm teaching myself, so I ignored these tools. I will try. – MikeTeX Aug 06 '23 at 06:48
  • In the mean time, I've edited my question and added the actual call to the function, if this can help... – MikeTeX Aug 06 '23 at 06:53
  • @Quentin. Debugger message added. – MikeTeX Aug 06 '23 at 07:15
  • There are quite a lot of problems here. 1) You need to learn about asynchronous execution, because your request won’t ever resolve right away. 2) When just opening an HTML file by double clicking it, there’s basically no external requests you can make at all due to security restrictions. 3) HTTP requests are comparatively expensive, so if you’re trying to check a lot of files, that is a very inefficient and slow operation to do every time, making this entire approach possibly infeasible. – deceze Aug 06 '23 at 07:28
  • So, what to do? is it just impossible to do this simple task? – MikeTeX Aug 06 '23 at 07:35
  • @deceze — It is not an asynchronous request – Quentin Aug 06 '23 at 08:36
  • Duplicate: https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local?answertab=scoredesc#tab-top – Quentin Aug 06 '23 at 08:37

1 Answers1

1

You got a problem with something called the same-origin policy. It's a rule in browsers, and it's messing with your project.

You want to check if a local file is there, but browsers don't like that. It can make things unsafe.

So here's a workaround. Just make a list of the pages you have. Then check that list instead of trying to find the file.

var existingPages = {
  "Abraham_page.html": true,
  // Add other existing pages here
};

function linkCheck(url) {
  return existingPages[url] === true;
}

if (linkCheck("Abraham_page.html")) {
  // The page exists
} else {
  document.getElementById("Abraham_link_id").style.color = "gray";
}

The code looks up the page in the list you make. If it's there, it's real. If not, the link turns gray.

MaikeruDev
  • 1,075
  • 1
  • 19