javascript - 无需网络服务器即可动态获取静态 HTML 页面

Question

有一个静态页面myapp/page.html和同一目录中的静态文件 myapp/data.txt .我想在浏览器中打开该页面从文件系统，没有网络服务器，并获取 myapp/data.txt 的内容文件。应该可以定期重新加载该文件以检查其内容是否已更改。

• fetch('file:///myapp/data.txt')由于某些安全错误无法正常工作 Fetch API cannot load file:///myapp/data.txt
• 加载图片 img.src='data.txt'也不起作用，它会加载可以在网络选项卡中看到的文件，但是当您尝试将其作为图像内容读取时，它会提示该图像已损坏。

作为最后的手段，可以更改 data.txt进入data.js并通过 script.src='data.js' 加载它但也许它也可以以某种方式将其作为文本加载？

Answer 1

As a last resort it's possible to change data.txt into data.js and load it via script.src='data.js' but maybe it's somehow possible to load it as a text too?

是的，你可以使用旧的 JSON-P method , 但有一个静态命名的函数。

基本上，您的主脚本中有如下内容:

window.onDataLoad = (data) => {
  // do something with data here
}

// Inject script tag wherever you want to reload the data
const scriptEl = document.createElement('script');
scriptEl.src = 'data.js';
document.querySelector('head').appendChild(scriptEl);

然后，在您的 data.js 中，像这样:

window.onDataLoad( << YOUR DATA HERE >> );

最后...只是想说明一下，我很同情!可笑的是 fetch() 无法处理这个。当远离 XHR 时，这是一个从 HTTP 中提取数据的好机会。遗憾的是，这并没有发生。