Question

瘦子

我很清楚JS在页面加载之后需要AJAX（或一些同步/异步调用）到get the contents of a file 。

（来自上一个链接）

var client = new XMLHttpRequest(); client.open('GET', '/foo.txt'); client.onreadystatechange = function() { alert(client.responseText); } client.send();

浏览器不允许直接访问文件。这是出于安全原因，减轻XSS攻击等等。

但是有没有办法将它包含在页面加载中......没有将包含在标记中？

我正在使用一些客户端模板（对客户端与服务器端争论不感兴趣）。目前，在页面加载时将包含在内的唯一方法，无需额外调用服务器，就是将内容投入到自定义类型script标记中：

<script id="t1" type="x-some-template"> ... contents of template <script>

然后以某种方式引用脚本块的内容：

var templateContents = $('#t1').html();

但是如果模板很长，它会使标记变得混乱（假设用户正在查看源代码）。 这完全是美学和挑剔，并不影响任何操作的方式 ，但是有一些偷偷摸摸的方式来包含模板而不将它们出现在标记中吗？ / p>
到目前为止......

我尝试将模板放入自己的.js文件中，并以相同的方式包含它：

<script id="t1" type="x-some-template" src="t1.js"><script>

但是没有办法引用内容，因为它从未被浏览器加载。

（来自javascript.info）

如果您将不受支持的值添加到类型中，例如，内容将被忽略。这是一个使用的技巧添加未呈现给页面的数据。

但如果你输入一个已知的类型：

<script id="t1" type="text/javascript" src="t1.js"><script>

将抛出错误，因为文件的内容不在适当的JS中。

其他解决方案可能是将模板内容分配给JS变量，并包括外部文件，然后引用所述变量：

// t1.js var temp = `... contents of template... `; // page.html var templateContents = temp;

但即使使用template literal，也可能是包含复杂模板的噩梦。然后你就会遇到将每个模板分配给不同变量并跟踪它们的问题。头痛比比皆是。如果您可以将每个模板分配给标准变量，然后根据包含它的脚本块引用它们，问题会稍微减轻......

var templateContents1 = $('#t1').temp; var templateContents2 = $('#t2').temp; // Or something like this... ...

但那是不行的。

我搜索的是高低，但我遇到的是无尽的AJAX和HTML Imports，其中awful support。

最后，问题

有没有人偶然发现了一个漂亮的方式来做到这一点？并以独立于浏览器（即普遍支持）的方式？我想远离任何后载服务器调用（即AJAX）。

加载包含内容的页面，并持久使用它。

关于潜在解决方案的想法

美化标记（我能想到的）的唯一方法是使用当前正在运行的方法，然后完全删除脚本块：

var templateContents = $('#t1').html(); $('#t1').remove(); // Or similar

但这不是一个非常好的解决方案，因为如果JS决定在templateContents上进行垃圾收集，那么内容将不再可用，并且您必须重新加载模板。

我不太喜欢服务器/ .htaccess的东西，但也许我可以修改.htaccess（或类似的）来读取自定义类型的脚本作为纯文本，然后它会持续存储在内存中以用于as-需要什么？

Golly，如果......肯定会膨胀......

理想的情况与我上面描述的情况类似，其中普通模板内容位于单独的文件中（未分配给变量）...

// t1.js ... all the contents of the template...

然后将它包含在一条漂亮的线条中......

// page.html <script id="t1" type="whatever-works" src="t1.js"></script>

以同样简单而美观的方式引用模板内容......

var templateContents = $('#t1').someTextAccessMethod();

有什么想法吗？

Answer 1

你可以试试这个。

这正是我所做的。

main.html

<!DOCTYPE HTML>
<html>

<head>
   <title>load txt</title>
</head>   
<body>
   <script type="text/javascript" src="test.js" type="application/json">
   </script>
   <script>
       document.write(a.data);
   </script>
</body>

</html>

和test.js文件。

var a = {
    "data" : "All the content of .txt file here with proper escape sequence and other formatting stuff"
  }

现在，解释。

您可以将所有数据放在txt文件中的对象中。将该对象保存在变量和单独的文件中。您可以使用脚本标记在初始页面加载期间加载该文件。

使用type =“application / json”阻止浏览器对对象内容执行任何检查。

文件的扩展名可以是任何。因为浏览器只检查正在下载的脚本类型。

加载包装在对象中的txt文件后，您可以执行JSON.stringify，将其加载到localStorage，然后从html中删除script标记。

在此之后，即使您关闭网站并重新打开它，也可以访问它。而且您不必修改服务器端或客户端的任何内容。

Answer 2

我发现将内容放在<script>标记上没有问题，只是它使标记/视图源变脏。那么为什么不巧妙地将您的文件内容倾注到外部JS文件（在某处/本地托管）＆amp;然后在你的项目中调用那个外部脚本，类似于：

<script type="text/html" src="http://yourdomain.com/contents_of_template.js">
    var t1 = "<div> template contents here </div>"
</script>

基本上这样你就会获得内容，同时你的viewsource上的内容也无法在另一个外部JS文件中看到。如果这对您有意义，请告诉我。

您还可以浏览窗口localStorage或FileAPI等选项以阅读＆amp;写文件，但两者都需要通过AJAX等方式读取内容。

Javascript - 在页面加载中包含.txt文件的内容而没有 ajax？

2 个答案:

Javascript - 在页面加载*中包含.txt文件的内容而没有* ajax？

2 个答案:

Javascript - 在页面加载中包含.txt文件的内容而没有 ajax？