javascript - 从 Javascript 加载一些文件

Question

借助 Javascript，这就是我想要在浏览器中执行的操作:

var mytext = '';
mytext += loadfile('intro.md');
mytext += loadfile('chap1.md');
mytext += loadfile('chap2.md');
... other files ...
$('#container').html(markdownrender(mytext));

注意:我确实知道浏览器内的 JavaSript 并不是真正用于执行此类操作的，我已经阅读了许多与此相关的问题，例如 How do I load the contents of a text file into a javascript variable? .

我有两个问题:

跨源问题

• 如 this answer 中所述, jQuery.get('foo.txt', function(data) {alert(data); }); 当与 file://一起使用时，将被阻止作为跨源请求... (火狐、Chrome 等)。即使没有出现此错误，也会出现另一个错误:未成功加载和格式不正确错误。使用本地文件时无法解决此问题，唯一的解决方案是使用服务器(请参阅 this comment )。
  由于这个答案是 2008 年的，所以这个问题有新版本的 jQuery 更新吗？

• This XMLHttpRequest solution有效(没有跨源错误)，但相当长/冗长。 8年后的现在，是否有更现代的方法来做到这一点？

同步/异步

• 即使前面提到的 XMLHttpRequest 解决方案有效，我也没有看到一种优雅的方法来确保文件 intro.md 在之前完成加载chap1.md，同上关于chap2.md。那么存在文件以错误顺序加载的风险。我可以看到可行的肮脏黑客手段，但没有真正令人满意的解决方案。

如今是否有一种现代方法可以从(浏览器)JavaScript 中的一些静态文件加载内容？

注意:我正在寻找一种也适用于本地文件 file://... 的解决方案，无需任何服务器。 (我自己确实有服务器，本地服务器，远程服务器等，但在这里我想找到一个即使只有浏览器也适用的解决方案)。

Answer 1

有效/无效的摘要:

文件读取器 API

允许拥有 <input>弹出窗口询问 Browse然后选择本地文件并打开它:

但是不允许默默地“包含”同一目录中的文本文件。请参阅Is it possible to load a file with JS/HTML5 FileReader on non served page?和 this answer 。 因此mytext = loadfile('intro.md');问题中建议的方法无法使用此 API。

获取

由@devilfart 建议。可以工作，但不能跨浏览器(不支持 IE 和 Safari)。

jQuery

jQuery.get('test.txt', function(data) { alert(data); });

与服务器配合得很好。在本地(非服务)上不起作用:仔细检查后，这是 Chrome 上的跨源问题，或者是 non well-formed或syntax error在火狐浏览器上。

XMLHttpRequest

这个:

var client = new XMLHttpRequest();
client.open('GET', './test.txt');
client.onreadystatechange = function() { alert(client.responseText); }
client.send();

• 与服务器一起使用时有效

• 适用于本地非 Firefox 服务(奇怪的是，发生了两种 alert :一种是空内容，另一种是加载的内容)

• 不适用于本地非 Chrome 服务(跨源问题)。

---

发现有趣的注释 here :

The only caveat is Chrome, which restricts access to local files via AJAX. To resolve this, simply add --allow-file-access-from-files to your Chrome runtime. All other modern browsers work on direct files without any hassle. csi.js also works fine from any web server, assuming you are following appropriate CORS policies.