所以我使用本地HTML和JavaScript文件作为视频文件的GUI。它几乎是我的服务器索引的外卖版本.php供他们在其他地方使用。一切正常，但我正在尝试从 txt 文件加载内容。我的网络服务器使用 XMLHttpRequest 来检索它，因为它是服务器端的。但由于外卖版本不在服务器上，因此文本文件与html文件位于同一本地目录中
。function loadBookmarks(){
var infoDoc = new XMLHttpRequest()
infoDoc.open("GET","info.bk");
infoDoc.send();
infoDoc.onreadystatechange = function() {
if (infoDoc.readyState== 4 && infoDoc.status == 200) {
document.getElementById("bookmarks").querySelector('p').innerHTML = infoDoc.responseText;
document.getElementById("infoButton").style.backgroundColor = "#119933";
} else {
document.getElementById("bookmarks").querySelector('p').innerHTML = "";
document.getElementById("infoButton").style.backgroundColor = "#993333"
}
}
}
这就是我正在使用的功能。有没有另一种方法可以使用离线非服务器 javascript 文件从文件中获取文本？
米切尔
这更像是一种解决方法，它涉及一些限制，但根据您的目标，它可能适合您的需求。要不。
AFAIK 您将无法使用 XmlHttpRequest 实现此目的，但您可以使用 FileReader 来加载文件。您可以在此SO中找到一个工作示例
如何使用Javascript打开本地磁盘文件？
缺点是FileReader必须从手动交互触发。因此，如果没有用户(您(单击并浏览要加载的文件，您将无法加载文件。
你能处理吗？
如果是这样，它甚至没有那么糟糕，因为一旦加载了，只需将文件的内容放入 localeStorage，因此下次加载页面或刷新页面时，文件中的数据可能来自 localeStorage，您不必手动选择要再次加载的文件。当然，除非文件已更改，但由于您不在服务器/Web服务器上，因此文件自动更改的可能性很低。所以我猜，如果您必须手动更改文件，您也可以接受另一个手动干预。
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
如果这不是您的选择，请考虑在文件和 localeStorage 中使用 JSON 格式的文本，它可以简化您的数据转换。
当然，如果你的文件永远不会改变，只需将数据嵌入到javascript变量中。
[编辑 2]示例
<body>
<!-- The input widget to select a file from browse -->
<input type="file" id="file-input" />
<!-- testing purpose only, a markup to display the loaded file content -->
<h3>Loading a file:</h3>
<pre id="file-content"></pre>
<script>
// Place a listener to know when the page is loaded
window.addEventListener('load',function(e){
// If there is some persistent data on the browser called 'stored_data'
if( localStorage.getItem('stored_data')){
// We can do something with this data
// without asking a user interaction at first
// User interaction could be done in order to refresh the data ( file changed since storing in browser cache )
doSomethingWithFileContents();
}
});
/**
* This is the callback of the addEventListener, it will be executed each time user select a file
* It's linked below, on the addEventListener call
*/
function readSingleFile(e) {
//retrieve the first selected file the user has select
var file = e.target.files[0];
// If no file selected, abort this function execution
if (!file) {
return;
}
// If a file is selected, create a new file reader
var reader = new FileReader();
// Define a callback to be run when the file will be loaded
reader.onload = function(e) {
// You can still use some console.log for debugging purpose
//console.log(e);
// Retrive the content of the loaded file
var contents = e.target.result;
// To enable some persistency, store the contents into a localeStorage
// It means next time you load the page, the data could come from the browser cache
localStorage.setItem('stored_data', contents );
// Will can now call the logic what we need to do with the file content
doSomethingWithFileContents();
};
// Trigger the file reader to load the selected file
reader.readAsText(file);
}
/**
* This function will be executed when data is ready.
* You should implements the logic that should be run with the file data
*
* - Data is ready could mean:
* - Data was available through localStorage
* - Data has just been loaded through FileReader
*/
function doSomethingWithFileContents() {
// Retrieve the cached data
var loadedData = localStorage.getItem('stored_data');
// Get the element that will display the raw data
var element = document.getElementById('file-content');
// Set its content to the storedData
element.textContent = loadedData;
// Once again, I strongly recommend you to use JSON formatted value in the file
// It will enable some easy transformation/parsing from js side
}
// Place a addEventListener on the file-input id element
// When its value changed, run the readSingleFile function
document.getElementById('file-input').addEventListener('change', readSingleFile, false);
</script>
</body>