从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：// ...（Firefox，Chrome等）一起使用时将被阻止为跨源请求。即使出现此错误，也会显示另一个错误：没有成功加载和not well-formed错误。使用本地文件时无法解决这个问题，唯一的解决方案是使用服务器（参见this comment） 是否有更新的jQuery新版本，因为这个答案来自2008年？

• This XMLHttpRequest solution有效（没有Cross-Origin错误），但是很长/详细。 现在，8年后有更现代的方式吗？

同步/异步

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

现在是否有一种现代方式从（浏览器）JavaScript中的几个静态文件加载内容？

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

Answer 1

工作/不工作的摘要：

FileReader API

允许<input>通过弹出窗口向Browse询问并选择一个本地文件并将其打开：

但不允许默默地＆＃34;包括＆＃34;位于同一目录中的文本文件。请参阅Is it possible to load a file with JS/HTML5 FileReader on non served page?和this answer。 因此，使用此API无法在问题中提出mytext = loadfile('intro.md');。

取

@devilfart建议。但不是crossbrwoser（IE和Safari不支持）。

的jQuery

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

适用于服务器。不适用于本地（非服务）：仔细检查后，它会在Chrome上出现Cross-Origin问题，并且在Firefox上为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服务（Cross Origin问题）。

有趣的说明找到here：

  

唯一需要注意的是Chrome，它通过AJAX限制对本地文件的访问。要解决此问题，只需将--allow-file-access-from-files添加到Chrome运行时即可。所有其他现代浏览器都可以直接处理文件而不会有任何麻烦。假设您遵循适当的CORS策略，csi.js也可以在任何Web服务器上正常工作。