用已知的URL从远程.txt文件中插入文本到元素
我需要一种方法将从.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);
});回答 2
Stack Overflow用户
发布于 2018-09-30 17:11:01
如前所述，您可以通过object HTML元素获得一些文件，就像您可以通过script HTML元素加载文件一样。从这些元素中，您不会遇到相同来源的策略问题，这就是为什么您的文档加载了setAttribute和appendChild。
如果您试图通过XHR访问某个资源，或者尝试与一个文档(都是通过JS进行交互)(这些文档与当前资源的来源不同)，则需要管理相同来源的策略机制(请参阅：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的信息。
使用嵌套文档，您可以在这里查看：
- SecurityError: Blocked a frame with origin from accessing a cross-origin frame
- How Can I Bypass the X-Frame-Options: SAMEORIGIN HTTP Header?
--如果您没有访问服务器部件的权限，可以从您拥有的服务器获取一个GET请求(因此可以访问服务器部分)。在这种情况下，您将不会遇到浏览器安全问题，因为在服务器上，您将在不受相同来源限制的情况下提供文件。它将是代理服务器解决方案。
与Firebase
当您使用Firebase创建项目时，您可以配置服务器部件以允许XHR，如下所述：url
- 首先安装Google，使其具有
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();
Stack Overflow用户
发布于 2018-09-30 14:08:25
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);编辑:我做了一个stackblitz，试图看看是否可以将文本文件中的数据提取到一个变量中进行操作。https://stackblitz.com/edit/angular-eyhaj5
我找不到办法。问题是，由于浏览器中的CORS策略，您不应该在自己的站点之外打开文件。
要解决这个问题，您必须将URL发送到服务器上的一个函数，该函数下载textFile，然后使其在文件夹中可访问。或者您可以设置一个允许cors的代理服务器。或者，可以要求文本文件的所有者将其转换为API。
也许，首先将文本文件放在防火墙中是个坏主意。如果您是文本文件的所有者，那么最好将文本放在一个消防局数据库中，而不是将其保存为文本文件。
https://stackoverflow.com/questions/52578484
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号