使用HTML/javascript访问本地文件

我正在尝试访问本地文件。该方法适用于Firefox（令人惊讶的是Edge），但不适用于Chrome

所讨论的文件是2个html文件，每个文件包含一个用作数据库的大型表。这些表是基本表（表、每组的tbody、tr和td以及数据）

我使用的方法是将html文件加载到2个隐藏的iFrame中，然后访问其中的表-html文件1是一个主拼写列表，html文件2是铅笔和纸RPG的类似文件。在Firefox中工作得很好-表格被读入内存，选择/选项都被加载，弹出窗口和页面修改（显示所选内容的结果，根据需要修改表的内存版本，生成的自定义函数工作-如果加载时存在此文件，则会自动更新表的内存版本，如果修改了表-向用户显示该函数，并可以使用文本编辑器将其复制/保存到本地文件系统）.又漂亮了

但Chrome则是另一回事。我可以在iFrame中加载文件，但无法访问其中的表。即使所有文件都在同一目录中（主html文件、functions.js文件、2个表文件，以及如果由用户生成和保存customization.js），它也会引发跨服务器访问错误

所以我的问题是：有没有一种方法可以加载/导入/访问主html中的第二个或第三个html文件，这些文件可以在FF、Chrome、Edge和大多数其他现代浏览器中使用，而无需更改任何安全设置

我想要一些简单的东西，比如如何加载js和iframe文件（）并使其可访问。xmlrequest可以在本地文件上工作吗（我可以加载并呈现表）

我想与其他玩家共享这些文件，但不能假设浏览器选择、安全设置以及一些可能没有足够的技术头脑来进行或希望进行上述更改

PS：我不想写任何文件回文件系统，用户是唯一一个有这些选项

好的，其他方法（使用新的标记属性）失败了，因此正在寻找劫持标记并使用JSON的方法

这里的另一个用户发布了这段代码（我已经清理了它-更容易阅读-并添加了建议但不包括在代码中的部分-添加/初始化rowIx及其递增器）

函数getTable（）{
var jsonArr=[]；
var obj={}；
var jsonObj={}；
var rowIx=0
//这假定整个页面中只有一个表，并且该表具有列标题
var thNum=document.getElementsByTagName（'th'）.length；
var arrLength=document.getElementsByTagName（'td'）.length；
对于（i=0；i

然后调用方显示返回值（在使用.innerText的p标记中，因为.innerHTML尝试呈现数据；在某些表格单元格中有p和br标记），以便可以将其复制/粘贴/保存在单独的.js文件中

在原始HTML（包含我稍后要在其他地方导入的表）中测试JSON.parse函数效果很好，尽管与原始的：array.Values[x].property vs array.rows[x].cells[y].innerHTML不同，但我可以使用它

格式： {“值”：{“数值索引”：{7个键/值对}，{模式重复122次}

但是当数据放在一个单独的js文件中时，它不会解析回原始数据（当开发者选项/web控制台被激活时会发现错误，见下文）

源HTML文件（具有表数据库，生成用于复制/粘贴/保存的JSON数据）
大表格（style=“display:none；”隐藏它，123行，每个行7个单元格）
上述函数是可获取的
var test1=getTable（）
使用.innerText更新p标记，以便使用test1数据进行复制
var schematics=JSON.parse（test1）
警报（schematics.Values[0].Name）
（所有这些都很有效）
js文件内容（schematics.json.js）
var schematics=JSON.parse（这里是复制/粘贴的数据）；
html文件
警报（schematics.Values[0].name）；//数据恢复测试
函数可重建（）{
//使用原理图数据重建隐藏表
) 
所有其他代码都在最后一个脚本标记中
Web控制台，报告了错误
JSON数据第1行第2列出现意外字符

---

那么，我对包含JSON的js文件或二级HTML页面有什么错呢？

这是Firefox（和Edge）与更严格的Chrome在安全模型和选择上的不同。你可以争论这两种方法的实用性与安全性

要使Chrome与其他两种浏览器一样工作，您需要在启动Chrome时使用命令行标志禁用该安全措施：

> chrome --allow-file-access-from-files

---

另一种选择是运行本地Web服务器（例如WAMP或XAMPP）并通过加载文件。

好的，找到一种可行的方法

在作为我的数据库的两个网页中，我添加了将表读入二维数组（逐行单元格）的代码

然后将这些字符串设置为JSON.stringized，并在返回字符串的开头加上“var variableName=”。然后将所有这些添加到一个p标记（.innerText），因为JSON数据中也有HTML代码，所以不需要呈现

然后，使用纯文本编辑器将呈现的数据复制并保存到JSON.variableName.js文件中（名称中的JSON用于提醒我文件中包含的内容）。加载数据与使用带有src=”“的脚本标记加载javascript代码一样简单

另外，现在所有的东西都可以在Firefox、Edge和Chrome中使用。我没有Safari或其他浏览器。另外，它也可以在Android Firefox中使用

这两个数据库网页很容易更新，它们将生成新的JSON数据输出

总而言之，

source HTML file (has the table database, generates the JSON data for copy/paste/save)
large Table (style="display:none;" which hides it, 123 rows by 7 cells each)
the above function getTable
var test1 = getTable()
update p tag using .innerText for copying with test1 data
var schematics = JSON.parse(test1)
alert(schematics.Values[0].Name)  
(all of that works)

js File contents (schematics.json.js)
var schematics = JSON.parse(  copy/pasted data goes here  );

html file
<script language="javascript" src="schematics.json.js"></script>
<script language="javascript">
  alert(schematics.Values[0].name); //data restored test
  function rebuildTable(){
    //use schematics data to rebuild hidden table
  ) 
</script>
<script language="javascript" src="_functions.js"></script>
all other code is in the last script tag

Web Console, reported error
unexpected character at line 1 column 2 of the JSON data

> chrome --allow-file-access-from-files