Question

我正在尝试访问本地文件。该方法适用于Firefox（并且令Edge感到惊讶）但不适用于Chrome。

有问题的文件是2个html文件，每个文件都包含一个用作数据库的大表。这些表是基本表格（表格，每个组的tbody，tr＆＃39; s和带数据的td＆＃39;）

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

但Chrome是另一回事。我可以在iframe中加载文件，但无法访问其中的表格。即使所有文件都在同一目录（主html文件，functions.js文件，2个表文件，以及用户生成并保存customization.js），它也会抛出有关跨服务器访问的错误。

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

我希望能像js和iframe文件一样简单地加载（）和访问。 xmlrequest可以处理本地文件（我可以加载和呈现表）吗？

我想与其他玩家分享这些文件，但不能假设浏览器选择，安全设置，而且有些人可能没有足够的技术思维来做出或想要进行更改。

PS：我不打算将任何文件写回文件系统，用户是唯一一个有这些选项的人。

好的，其他方法（使用新的标记属性）失败，因此研究了一种劫持标记并使用JSON的方法。

此处的另一位用户发布了此代码（我已将其清理干净 - 更易于阅读 - 并添加了建议但未包含的代码部分 - 添加/初始化rowIx及其增量器）

function getTable() {
  var jsonArr = [];
  var obj = {};
  var jsonObj = {};
  var rowIx = 0
  //this assumes only one table in the whole page, and table has column headers 
  var thNum = document.getElementsByTagName('th').length;
  var arrLength = document.getElementsByTagName('td').length;
  for(i = 0; i < arrLength; i++){
    if(i%thNum === 0){ obj = {}; }
    var head = document.getElementsByTagName('th')[i%thNum].innerHTML; 
    var content = document.getElementsByTagName('td')[i].innerHTML; 
    obj[head] = content; 
    if(i%thNum === 0){ 
      jsonObj[rowIx++] = obj; 
    }
  } 
  return JSON.stringify({"Values": jsonObj}) 
}

然后调用者显示（在P标签中使用.innerText，因为.innerHTML尝试渲染数据;某些表格单元格中有p和br标签）返回的值，因此可以复制/粘贴/保存一个单独的.js文件。

测试原始HTML中的JSON.parse函数（包含我想稍后在其他地方导入的表）工作得很好，虽然不像原来的那样：array.Values [x] .property vs array.rows [x] .cells [y] .innerHTML但我可以使用它。

格式： {＆＃34;值＆＃34;：{＆＃34;数字索引＆＃34;：{7键/值配对}，{模式重复122次}}}

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

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

那么我对包含js文件或辅助HTML页面的JSON做错了什么？

Answer 1

这与Firefox（和Edge）与更严格的Chrome的安全模型和选择有所不同。您可以争论这两种方法的效用与安全性。

要像其他两个浏览器一样使用Chrome，您需要在启动Chrome时使用命令行标记禁用该安全措施：

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

另一种方法是运行本地网络服务器（例如WAMP或XAMPP）并通过http://localhost/加载您的文件。

Answer 2

好的，找到了一种有效的方法。

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

然后是JSON.stringified，并且在返回的字符串的开头添加“var variableName =”。然后将所有这些添加到p标记（.innerText，因为JSON数据中也有HTML代码，不需要渲染）。

然后使用JSON.variableName.js文件中的纯文本编辑器复制和保存所呈现的数据（名称中的JSON是为了提醒我文件中的内容）。加载它就像使用带有src =“”的脚本标记加载javascript代码一样简单。

此外，现在一切都适用于Firefox，Edge和Chrome。我没有Safari或其他浏览器。对我而言，它也适用于Android Firefox。

可以轻松更新两个数据库网页，它们将生成新的JSON数据输出。

总而言之，有6个基本文件：主网页，functions.js，两个JSON变量js文件和2个数据库/ JSON生成器网页。所有本地，无需额外的网络服务器。

使用HTML / javascript访问本地文件

2 个答案: