如何在没有网络服务器的情况下获取外部 JavaScript 的文本（即 AJAX）

Question

我正在编写 WebGL 应用程序。到目前为止，我将 <script>-tags 中的着色器直接放入我的标准 html 文件中（我们称之为 index.html）。因此，通过在使用 getElementbyId('foo') 获取的脚本标签上使用 .text，很容易 "parse" 着色器代码。

但现在我认为那是不整洁的。我希望我的着色器存储在扩展名为 .vert /.frag 的外部文件中，并从那里解析它们。我的第一种方法如下：

<script id="shader-vs" src="./shaders/basic_vertexShader.vert" type="x-shader/x-vertex"></script>

<script id="shader-fs" src="./shaders/basic_fragmentShader.frag" type="x-shader/x-fragment"></script>

var shaderScript = document.getElementById(id);
if (!shaderScript) {
    return null;
}

var str = shaderScript.text;

结果是空字符串 ("")。我仔细检查了所有文件路径是否正确。 .text 似乎只适用于本地标签。

那么，我该怎么做才能接收这些文件的内容？ AJAX 不可能，因为当应用程序保存在客户端的存储中时，它也应该在没有互联网连接的情况下工作。

我很感谢你的每一个建议。

重要提示：正如我所提到的，我不是在搜索通常的 AJAX-东西。我正在寻找获取外部链接脚本文件代码的可能性。由于它们在 HTML 文件中是静态链接的，所以我认为如果没有异步请求，这应该没问题。不过好像是。

Answer 1

我建议使用服务器端模板将代码存储在您提到的文件中，然后将其注入 html。这种方法提出了关注点分离：你的着色器文件按照你想要的方式分开，模板被编译然后在 HTTP 请求进入时被发送出去。一个使用伪代码的 mustachey 示例（假设 hash-literal 语法用于您的服务器端语言):

html = system.readFile('index.html');
vert = system.readFile('myVertFile.vert');
Mustache.render(html, {data: vert});

你的 HTML 看起来像这样：

<script>{{data}}</script>

此方法还可用于根据传入的 http 请求的内容执行任何类型的条件模块加载。

Answer 2

如果您将其设为离线，您仍然可以使用Ajax（查看评论！）html5 网络应用程序。（当然这取决于您目前需要支持的浏览器。）

如何在没有网络服务器的情况下获取外部 JavaScript 的文本（即 AJAX）

How to get the text of a external JavaScript without webserver-stuff (i.e. AJAX)

html

javascript

tags

text

script-tag