17

我有以下两个文件：

索引.html

<html>
<head>
<meta charset="utf-8" />
<title>Web Page</title>
<style type="text/css">
.text {
    display: inline-block;
    font-family: tahoma;
    font-size: 14px;
    max-width: 400px;
    background-color: #ddedff;
    padding: 10px;
    text-align: justify;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    get_data('info.txt');
});
function get_data(file) {
    var request = new Request(file);
    fetch(request).then(function(response) {
        return response.text().then(function(text) {
            $('.text').html(text);
        });
    });
}
</script>
</head>
<body>
    <div class="text"></div>
</body>
<html>

信息.txt

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

当我打开Mozilla Firefox文件时：README.html通过这个本地URI：

file:///C:/testing/README.html

它按预期工作，我的意思是，文件上的文本：info.txt正确显示。

但是当我打开它时URI，Google Chrome我得到一个空白屏幕，控制台上出现以下错误：

README.html:26 Fetch API cannot load file:///C:/testing/README.md. URL scheme must be "http" or "https" for CORS request.
get_data @ README.html:26
README.html:26 Uncaught (in promise) TypeError: Failed to fetch
    at get_data (README.html:26)
    at HTMLDocument.<anonymous> (README.html:21)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

你有什么我可以做的，所以我可以Google Chrome像我一样打开本地文件Mozilla Firefox吗？

如果我必须做一些调整：

chrome://flags/

这对我来说是可以接受的。

编辑

我尝试Google Chrome使用以下标志从命令行启动：按照此处--allow-file-access-from-files的建议，但现在出现以下错误：

README.html:26 Fetch API cannot load file:///C:/testing/README.md. URL scheme "file" is not supported.
get_data @ README.html:26
README.html:26 Uncaught (in promise) TypeError: Failed to fetch
    at get_data (README.html:26)
    at HTMLDocument.<anonymous> (README.html:21)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

谢谢！

4

1 回答 1

10

对于 chrome，您仍然需要--allow-file-access-from-files（我建议安装单独的 chrome并将其仅用于这些项目以保持安全），但只需fetch()为XMLHttpRequest请求填充file://：

if (/^file:\/\/\//.test(location.href)) {
    let path = './';
    let orig = fetch;
    window.fetch = (resource) => ((/^[^/:]*:/.test(resource)) ?
        orig(resource) :
        new Promise(function(resolve, reject) {
            let request = new XMLHttpRequest();

            let fail = (error) => {reject(error)};
            ['error', 'abort'].forEach((event) => { request.addEventListener(event, fail); });

            let pull = (expected) => (new Promise((resolve, reject) => {
                if (
                    request.responseType == expected ||
                    (expected == 'text' && !request.responseType)
                )
                    resolve(request.response);
                else
                    reject(request.responseType);
            }));

            request.addEventListener('load', () => (resolve({
                arrayBuffer : () => (pull('arraybuffer')),
                blob        : () => (pull('blob')),
                text        : () => (pull('text')),
                json        : () => (pull('json'))
            })));
            request.open('GET', resource.replace(/^\//, path));
            request.send();
        })
    );
}

该垫片将；

  • 仅激活本地打开的 html 文件（外部if语句），
  • fetch()为未指定协议（因此非file://请求）的任何 url调用 normal ，并且
  • /root/bob.html将用相对于当前路径的路径替换绝对路径（ ）（因为这会危险地评估为C:\或等效）

path如果您index.html实际上不是项目的根目录，请设置为其他内容。
如果您需要对init或任何其他的支持text()，则需要添加它。
明确file://的请求不会被满足，这是故意的，但如果你真的知道你在做什么，你就会知道如何让这个为你工作，如果你不这样做，你就不应该这样做。

如果您要对多个文件执行此操作，以下内容很有用。换成. './'_ document.currentScript.getAttribute('data-root')现在您可以将该片段放入它自己的文件中，例如filesystemHelper.js，然后在各种文件中像这样调用：

<script src="../filesystemHelper.js" data-root="../"></script>

相当时髦。

于 2020-01-27T05:53:06.667 回答