Question

我需要一种方法，可以将从URL的.txt文件中下载的文本插入到元素或变量中，以便我进一步使用。

我尝试将URL添加到可以正确显示文本的对象元素中，但是我不知道如何将此文本添加到变量中。

var storage = firebase.storage();
var storageRef = storage.ref();
var tangRef = storageRef.child('Recs');
var fileRef = tangRef.child("rec3.txt");

    fileRef.getDownloadURL().then(function(url)
    {
        alert(url);
        var para = document.getElementById('p1');
        var par = document.createElement("object");
        par.setAttribute('data', url);
        para.appendChild(par);

    }).catch(function(error) 
    {
        console.error(error);
    });

Answer 1

如前所述，您可以通过object HTML元素来获取某些文件，就像通过script HTML元素来加载文件一样。通过这些元素，您将不会遇到同源政策的问题，这就是为什么文档中装有setAttribute和appendChild的原因。

如果您尝试通过XHR访问资源或尝试与文档（均由JS进行交互）（它们与当前资源的来源不同），则需要管理一个同源策略机制参见：https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

您可以选择XHR或从对象HTML元素中选择访问嵌套文档，在两种情况下，您都将遇到同源策略问题。这是出于安全原因，与JavaScript链接。

如果选择嵌套文档，则可以执行以下操作：

<div id="p1"></div>

<script>


var url = "https://firebasestorage.googleapis.com/v0/b/ninjatest-1b0ab.appspot.com/o/random%20text%20file.txt?alt=media&token=c09ae3ee-6a01-4f2b-b2b3-2f57ed7ff111";
// or
// var url = "http://localhost:4000/file.txt";

var para = document.getElementById('p1');
var par = document.createElement("object");
par.setAttribute('data', url);
para.appendChild(par);

par.onload = function() {
  var doc = par.contentDocument || par.contentWindow.document;
  var data = doc.body.childNodes[0].innerHTML;

  console.log(data);
};


</script>

如果运行此代码，则可以看到它不接受跨域。这是因为我试图从另一个域中获取一个文档（嵌套在HTML文档中）。 浏览器不允许我访问它。另一方面，如果我在本地使用节点服务器运行，则可以使我获得它而不会出现错误。

如果您选择使用 XHR （XMLHttpRequest），则可以执行以下操作：

var data;
var url = "https://firebasestorage.googleapis.com/v0/b/ninjatest-1b0ab.appspot.com/o/random%20text%20file.txt?alt=media&token=c09ae3ee-6a01-4f2b-b2b3-2f57ed7ff111";

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    data = xhr.responseText;
    console.log(data);
  }
};

xhr.open('GET', url);
xhr.send();

再次在这里，由于来源不同，它将无法正常工作。在两种情况下，是浏览器实现了安全规则。如果您有权访问服务器部件，则可以对其进行修复。在服务器上，您可以告诉浏览器（通过HTTP标头）允许来自不同来源的客户端。

使用XHR，您需要搜索CORS。

使用嵌套文档，您可以在此处查看：

如果您无权访问服务器部分，则可以通过拥有的服务器上的GET请求获取文件（因此可以访问服务器部分）。在这种情况下，您将不会出现浏览器安全问题，因为从服务器上提供文件时将不受同源限制。这将是一个代理服务器解决方案。

使用Firebase

使用Firebase创建项目时，您可以配置服务器部分以允许XHR，如此处所述：https://firebase.google.com/docs/storage/web/download-files#download_data_via_url

首先安装Google Cloud SDK，使其具有gsutil：https://cloud.google.com/storage/docs/gsutil_install#install
然后在您的计算机上创建一个.json文件：https://cloud.google.com/storage/docs/configuring-cors#configure-cors-bucket
然后执行以下命令：gsutil cors set cors.json gs://<your-cloud-storage-bucket>

JSON文件示例：

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

我创建了一个Firebase帐户，并进行了尝试，效果很好。

使用 XHR 的工作示例（您可以运行它）：

var data;
var url = "https://firebasestorage.googleapis.com/v0/b/first-app-a7872.appspot.com/o/firebase.txt?alt=media&token=925fef9e-750e-40e5-aa92-bdfe8204d32e";

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    data = xhr.responseText;
    console.log(data);
  }
};

xhr.open('GET', url);
xhr.send();

Answer 2

https://codepen.io/anon/pen/JmoqQY?editors=1010

在HTML文件中：

<div id="p1">
</div>

脚本

url = "https://firebasestorage.googleapis.com/v0/b/ninjatest-1b0ab.appspot.com/o/random%20text%20file.txt?alt=media&token=c09ae3ee-6a01-4f2b-b2b3-2f57ed7ff111"

    var para = document.getElementById('p1');
    var par = document.createElement("object");
    par.setAttribute('data', url);
    para.appendChild(par);

编辑：我进行了一次堆栈闪电测试，以尝试查看是否可以将文本文件中的数据提取到变量中以进行操作。 https://stackblitz.com/edit/angular-eyhaj5

我找不到办法。问题是，由于浏览器中的CORS策略，您不应在自己的站点之外打开文件。

要解决此问题，您必须将URL发送到服务器上的一个功能，该功能可以下载textFile，然后使其在文件夹中可访问。或者，您可以设置允许cors的代理服务器。或者，您可以要求文本文件的所有者将其制作为API。

首先将文本文件放到火存储中可能不是一个好主意。如果您是文本文件的所有者，则最好将文本放入Firestore数据库中，而不是将其另存为文本文件。

将具有已知URL的远程.txt文件中的文本插入到元素中

2 个答案: