如何从本地运行的 html+javascript 页面访问和读取本地文件答案

【问题标题】：How do I access and read a local file from html+javascript page running locally如何从本地运行的 html+javascript 页面访问和读取本地文件
【发布时间】：2021-11-02 07:18:49
【问题描述】：

我想编写一个可以在本地运行并在我的计算机上操作一个小文本文件的小 html 文件。我的要求是：

文本文件位于我计算机上的目录中 (test.txt)
Html 文件与文本文件 (test.html) 位于同一目录中
我想在 html 中使用 javascript 来读取和写入文本文件。

这可能吗？如果是，我如何使用 javascript 读写我的文本文件？

【问题讨论】：

最初看起来这是重复的，我投票关闭。对此感到抱歉。我的投票已锁定，我无法撤消结束投票。如果您使用的是 Windows 系统，我有一些建议给您。

标签： javascript html

【解决方案1】：

正如 Itay Moav 的回答中所讨论的，使用本地 HTML 文件写入本地文件可能会成为一个问题，而无需在提升的特权模式下运行并具有额外的 Javascript 功能（允许您保存本地文件） .

但是，完全可以从 HTML 文件访问本地文件。下面是一些示例代码。

mytext.txt

My local text file

local.html

<html>
<head>
<base href="file:///C:/path/to/your/folder/"/>
<script>
window.onload = function(){
    var iframe = document.createElement('iframe');
    iframe.id = 'iframe';
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
    iframe.src = 'mytext.txt';
    setTimeout(function(){
        var text = document.getElementById('iframe').contentDocument.body.firstChild.innerHTML;
        alert(text);
    }, 1000);
}
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

这将在 html 页面加载后 1 秒发出警报（以允许 iframe 首先加载），并将包含 mytext.txt 文件中的内容。

注意，如果是纯文本，Firefox 会用 PRE 元素包装它，这就是我使用firstChild 的原因。另外，请注意 BASE 元素的使用，它指向您的文件所在的本地目录。

【讨论】：

感谢您的建议。如果需要，是否可以以某种方式写入文件？
@gyurisc - 除非您有具有特殊功能的本地运行脚本（例如 JScript），否则不会。例如，Javascript 不允许目录发现和文件操作；您将需要具有本地目录功能的 Javascript。
Firefox 说权限被拒绝。

【解决方案2】：

Jared 给出的示例运行良好。然而，设定一个未知的等待时间并不吸引人。而是将 onload 事件附加到 iframe 调用读取文本文件内容的函数并尽快执行任何操作。

这是一个修改后的例子：

<html>
<head>
<script>
function readfile() {
    alert(document.getElementById('iframe').contentDocument.body.firstChild.innerHTML);
}
</script>
</head>
<body>
<iframe id='iframe' src = 'test.txt' onload='readfile()'> </iframe>
<h1>Hello World!</h1>
</body>
</html>

test.txt 文件当然必须与上述 html 文件本身存在于同一目录中。

【讨论】：

【解决方案3】：

通常情况下，这是不可能的，而且会是一个安全问题。
但是，如果您使用一些插件（ActiveX、FF 扩展等），它们可能会让您这样做。
您还可以在最新的浏览器中使用本地存储这一主题。

从您的 cmets，我想知道为什么不使用 PHP/Ruby 任何其他服务器端语言来这样做？它们就是为此量身定制的。

【讨论】：

为什么本地html文件访问本地文本文件存在安全问题？
你如何区分本地和外部？什么会阻止我在你的机器上“放置”一个 HTML 文件，因此它是本地的？
我想知道这种情况是否不同，因为 html 文件来自与我想读/写的文件相同的目录。所以它们来自相同的来源或相同的 url。不确定，如果这是正确的，只是猜测......
它可以读取文件，但如果它在浏览器中运行则不能写入。我从来没有使用过它，但是如果以某种方式运行，JScript 是否也允许本地读/写？
另外，如果有人有权将文件放在您的本地计算机上然后让您运行它，那将是权限问题，而不是 HTML 文件本身。

【解决方案4】：

您还可以使用 hta 文件扩展名，它将加载到您可以访问 ActiveX 对象的 IE 中。在紧要关头，您可以非常快速地启动并运行可执行程序，而无需付出任何努力。

相关代码为：

<!DOCTYPE html>
<html>
    <head>
        <HTA:APPLICATION
             ID="somethingHere"
             APPLICATIONNAME="YouAppsName"
             WINDOWSTATE="maximize"
        >
         <script language="JScript">
        function ReadFile(filename) {
            try {
                var fso  = new ActiveXObject("Scripting.FileSystemObject");
                var fh = fso.OpenTextFile(filename, 1);
                var contents = fh.ReadAll();
                fh.Close();
                return contents;
            } catch (Exception) {
                return "Cannot open file :(";
            }
        function WriteFile(filename, text) {
            try {
                var fso  = new ActiveXObject("Scripting.FileSystemObject");
                var fh = fso.OpenTextFile(filename, 8, true);
                fh.Write(text);
                fh.Close();
            } catch(Exception) {
                alert("Failed to write.");
            }
        }
            .....
    </script>
    etc.....

【讨论】：

在你投反对票之前..这是满足读/写问题要求的唯一答案。无论您是否蔑视 IE，它都是有效的。

【解决方案5】：

为什么不使用fetch() 函数？请注意，他将使用另一台服务器提供文件

这是一个人使用它的教程https://youtu.be/C3dfjyft_m4

【讨论】：