动态重新加载本地JavaScript源代码/JSON数据

Question

有哪些跨浏览器（至少Firefox和Chrome）的方法可以动态重新加载由本地加载的HTML文件引用的本地JavaScript文件？ 背景： 使用本地HTML页面呈现由两个引用的JavaScript文件格式化和显示的某些数据。一个文件包含JavaScript代码，另一个文件包含JSON数据。 这个JSON数据通过另一个程序在磁盘上更新，希望UI能够自动合并这些更新而不必手动重新加载页面（或打开新页面）。 在Firefox中，我认为可以使用AJAX来加载HTML解决问题，但在Chrome中，由于同源策略失败，这将无法实现（不幸的是，我不能仅仅依赖于--disable-web-security来缓解这种情况，因为所有先前的Chrome实例都必须关闭才能使它工作）。 我唯一看到的解决方案是运行本地Web服务器，但我希望有更简单、更少干扰的解决方案（也许将JavaScript加载到iframe中并重新加载iframe，尽管我想象这会被浏览器安全所阻止）。 有没有人有什么建议？

- Trevor Freeman

Answer 1

我使用以下代码重新加载JavaScript和JSON文件。

/* Load a JavaScript or JSON file to use its data */    
function loadJsFile(filename, dataIsLoaded){
    var fileref = document.createElement('script');
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", filename);
    fileref.onload = dataIsLoaded;

    if (typeof fileref!="undefined"){
        document.getElementsByTagName("head")[0].appendChild(fileref);
    }  
}

/* The callback that is invoked when the file is loaded */
function dataIsLoaded(){
    console.log("Your data is ready to use");
}

当JSON文件与网站位于同一目录中时的使用方法：

var jsonFile= "myData.json";
loadJsFile(jsonFile, dataIsLoaded);

我在IE10和Firefox 22中成功测试过，但在Chrome上无法工作。

- Matthias Braun

---

作为一个初学者，我想知道当你调用函数时，数据是如何从该函数中访问的？因为我没有看到返回函数/变量。 - Jasper

@Jasper：myData.json 文件中的数据在 JavaScript 中是全局可访问的。假设在您的 JSON 文件中有一个 var externalInfo。外部程序或脚本会定期更新该变量。因此，在您的 JavaScript 中，您编写了一个方法，每五秒钟调用一次 loadJsFile("myData.json")。最后，您在 dataIsLoaded 中使用更新后的 externalInfo。 - Matthias Braun

“但它在Chrome上不起作用” - Chrome占有约50％的市场份额。我讨厌JavaScript。 - Shon

九年过去了，现在在Chrome中能用吗？ - WinEunuuchs2Unix

Answer 2

如果您的应用程序启动Chrome浏览器，则可以在启动命令中包含--allow-file-access-from-files标志。

- Greg Ross

---

已接受，但这会遇到同样的问题（您所指出的），即您必须确保它是启动的第一个 Chrome 实例（而我无法在所有情况下确保这一点）。 - Trevor Freeman