HTML file and Javascript file with AJAX do not work with each other
Question
For seven years I have been programming small websites for offline and private use. Each of these projects consists of an html file, linking to a css file, and a javascript file. The latter uses AJAX to load content from a.txt file and displays it flexibly on the html site. The files (.html, .css, .js, .txt) are in the same folder on my local hard disk and I open the html file locally in my browser. I have been using this setting successfully for writing own small encyclopedias, vocabulary trainers, games etc.
However, it does not work any longer. AJAX does not load the text file contents. (I know that because I inserted the Javascript/AJAX code directly in the html file and it still didn't work.) Moreover, HTML does not connect with the.js file. (I know that because I inserted the text contents directly as variable in the Javascript file and it still didn't work.) Only if I combine both steps (ie inserting Javascript code in the html file and inserting the text contents as variable), it works. Then, all but CSS is in one html file. This is however not feasible as the file gets very confusing and editing the text contents is hardly possible.
The problem started about half a year ago when I updated my Firefox. First, I thought the browser has changed some security settings in order not to allow an html file to link to a javascript. But I didn't find respective settings. Then, I tried with other browsers. Chrome, Edge and the old IE reacted the same way. I confess that I didn't try Opera, Safari and other browsers, however, the ones I tried already represent a certain variety. I tried different computers, but my once succesfull web sites failed. It felt like as the setting had never worked, but it has worked perfectly for many years. As such code is taught in popular courses such as W3 Schools, it should work. I had not changed anything of the code. So, I wondered whether this feature had been removed globally for any security reasons. But if so, the most simple processes of the world wide web would not work any longer. This is obviously not the case. A simple html file linked to a javascript code using AJAX is one of the most basic features of web programming, isn't it? Thus, there seems to be an error or cause which I cannot find.
I have been waiting and trying all solutions I could think of, but it seems there is only one way to get out of this dead end: Asking you, dear programmers. I think many of you have much more experience than me, as I know only very basic issues of web design. I would be thankful if you can let me know in case you can think of any cause and/or solution for my problem.
For easier understanding, I give here the basic sample code which is almost the same in all my projects:
This is the address (please look at the last two characters):
file:///C:/MyProgrammes/SampleProgramme/Site.html?1
This is the Site.html file:
<!DOCTYPE html>
<html>
<head>
<link href="Design.css" rel="stylesheet"/>
<script src="Programme.js"></script>
</head>
<body>
<div id="ShowResult"></div>
</body>
</html>
This is the Programme.js file:
var List; // this variable is defined globally here
var GetContent = new XMLHttpRequest(); // start of AJAX, receivinig contents of the txt file
GetContent.open('GET','Contents.txt',true);
GetContent.send();
GetContent.onreadystatechange = function () {
if (GetContent.readyState == 4) {
List = GetContent.responseText.split("\n");
}
} // end of AJAX
document.getElementById('ShowResult').innerHTML = List[1];
This is a sample of the Contents.txt file:
Grass is green.
The sky is blue.
Clouds are white.
Furthermore, there is a Design.css file which still works the usual way.
Now, I expect the screen to display "The sky is blue.". It worked perfectly, but now it doesn't. Please help me if you know a solution!
Best regards,
Johannes
1 answers
solution1
0 ACCPTED 2020-10-07 16:27:27
This looks like it is probably a result of security fix referenced at the below:
https://www.mozilla.org/en-US/security/advisories/mfsa2019-21/#CVE-2019-11730
A disussion on the subject at:
https://bugzilla.mozilla.org/show_bug.cgi?id=1566051
suggests you now need to explictly enable reading of local files by setting:
privacy.file_unique_origin preference
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.