使用HTML/javascript访问本地文件 [英] Accessing a local file using HTML/javascript
问题描述
我正在尝试访问本地文件.该方法适用于Firefox(使Edge感到惊讶)，但不适用于Chrome.
有问题的文件是2个html文件，每个文件包含一个用作数据库的巨大表.这些表是基本表(表，每个组的正文，带有数据的tr和td).
我正在使用的方法是将html文件加载到2个隐藏的iframe中，然后访问其中的表格-html文件1是主拼写列表，而html文件2是铅笔和纸RPG的类似文件.在Firefox中可以很好地工作-将表读入内存，全部加载选择/选项，弹出窗口和页面修改(显示所选内容的结果，根据需要修改表的内存版本，生成的自定义函数有效-如果此文件在加载时存在如果修改了表，它将自动更新表的内存版本-向用户显示该功能，并且可以使用文本编辑器将其复制/保存到本地文件系统).再次精美.
但是Chrome是另一回事.我可以将文件加载到iframe中，但是无法访问其中的表.即使所有文件都位于同一目录(主html文件，functions.js文件，2个表文件，以及如果由用户自定义和生成和保存的文件)，它也会引发关于跨服务器访问的错误.
所以我的问题是:是否有一种方法可以在不更改任何安全设置的情况下在FF，Chrome，Edge和大多数其他现代浏览器中加载/导入/访问可在FF，Chrome，Edge和大多数其他现代浏览器中运行的第二个或第三个html文件? /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})
}
然后，调用者显示(使用.innerText的P标记，因为.innerHTML尝试呈现数据；某些表单元格中包含p和br标记)返回值，以便可以将其复制/粘贴/保存在其中.一个单独的.js文件.
在原始HTML(包含我要稍后导入到其他地方的表)中测试JSON.parse函数可以很好地工作，尽管不像原始的那样:array.Values [x] .property vs array.rows [x] .cells [y] .innerHTML，但我可以使用它.
格式: {值":{数字索引":{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
那么包含JSON的js文件或辅助HTML页面在做什么呢?
这是Firefox(和Edge)与更严格的Chrome相比在安全性模型和选择上的差异.您可以为这两种方法的效用与安全性争辩.
要像其他两种浏览器一样使用Chrome，必须在启动Chrome时通过命令行标志禁用该安全措施:
> chrome --allow-file-access-from-files
另一种选择是运行本地Web服务器(例如WAMP或XAMPP)并通过 http://localhost/加载文件a>.
I am trying to access local files. The method works with Firefox (and was surprised Edge) but not Chrome.
The files in question are 2 html files each containing a huge tables that are used as databases. The tables are basic tables (table, tbody for each group, tr's, and td's with data).
The method I am using is to load the html files into 2 hidden iframes then accessing the tables inside - html file 1 is a master spell list and html file 2 is similar file for a pencil and paper RPG. Works beautifully in Firefox - tables are read into memory, selects/options are all loaded up, popups and page modifications (showing results of what you selected, memory versions of tables modified as needed, generated customized function working - if this file exists at loadup it automatically updates the memory versions of the tables, if the tables are modified - user is shown the function and can copy/save by using a text editor to local file system). Again beautifully.
But Chrome is a different matter. I can load the files in the iframes, but can't access the tables within. It throws an error about cross server access even though all files are in the same directory (the master html file, functions.js file, 2 table files, and if generated and saved by user the customization.js).
So my question is: is there a way to load/import/access a second or third html file in the main html that will work in FF, Chrome, Edge, and most other modern browsers without changing any security settings?
I would love something as simple as how js and the iframe files can be loaded () and accessable. Can xmlrequest work on local files (I could load and render the tables)?
I would like to share the files with the other players, but can't assume browser choices, security settings, and some may not be technically minded enough to make or want said changes.
PS: I am not looking to write any files back to file system, user is the only one with those options.
OK, the other methods (using new tag attributes) failed so looking into a way to hijack the tag and use JSON.
Another user here posted this code (I have cleaned it up - easier to read - and added the suggested but not included part of the code - adding/initializing rowIx and its incrementer)
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})
}
the caller then displays (in a P tag using .innerText since .innerHTML tries to render the data; there are p and br tags in some of the table cells) the returned value so it can be copy/pasted/saved in a separate .js file.
Testing the JSON.parse function in the original HTML (that contains the table I want to later import elsewhere) works just fine, although not like the original: array.Values[x].property vs array.rows[x].cells[y].innerHTML but I can work with that.
format: {"Values":{"numeric index":{7 key/value pairings},{pattern repeated 122 more times}}}
But when the data is placed in a separate js file, it won't parse back to the original data (error is found when developer options/web console is activated, see below).
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
So what am I doing wrong with the JSON containing js file or secondary HTML page?
This is a difference in the security models and choices of Firefox (and Edge) vs the more strict Chrome. You could argue for the utility vs security of either approach.
To make this work with Chrome the way the other two browsers do, you'll need to disable that security measure with a command line flag when you start Chrome:
> chrome --allow-file-access-from-files
The other alternative is to run a local webserver (e.g. WAMP or XAMPP) and load your files via http://localhost/.
这篇关于使用HTML/javascript访问本地文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
