如何读取<script>包中的文件
如何读取<script>包中的文件
提问于 2015-04-11 22:59:31
很长一段时间以来，我经常在一个问题上伤害自己:我正在运行一个使用着色器代码的WebGL api。这些着色器存储在我的html页面的头部，如下所示：
<script id="vertex-shader" type="x-shader/x-vertex">
[vertex shader code here...]
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
[fragment shader code here...]
</script>但我不喜欢我的GLSL代码直接在我的html页面。因此，我想做以下几点工作：
<script id="vertex-shader" type="x-shader/x-vertex" src="path/to/shader/file.vert"></script>
<script id="fragment-shader" type="x-shader/x-fragment" src="path/to/shader/file.frag"></script>并给每个着色器他自己的文件，只有他的路径在html脚本包。
但是，加载页面后，如何从javascript代码到达文件呢？我知道我必须使用FileReader对象来读取它，我也知道如何使用它，但我不知道如何到达与我的着色器源文件对应的File对象，即使我在字符串中获得了完整的路径。
我不想提出Ajax请求，因为我不想在加载页面后在服务器上再提出任何请求。
请告诉我如何从他的道路上打开文件..。或者我在这里所做的一切都是不可能的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-04-11 23:16:40
最简单的方法是对文件发出AJAX GET HTTP请求：
function getShader(id){
return new Promise(function(resolve, reject){ // return a future
var script = document.getElementById(id).src;
var xhr = new XMLHttpRequest;
xhr.onload = function(){ resolve(xhr.responseText); };
xhr.onerror = reject;
xhr.open("GET", script);
xhr.send();
});
}这反过来又会让你：
getShader("vertex-shader").then(function(content){
// content is the contents of the file.
});您还可以遍历DOM并将所有着色器以类似的方式放置在地图中：
function loadAllShaders(){
var shaders = document.querySelectorAll('[type="x-shader/x-vertex"]');
var futures = [], names = [];
for(var i = 0; i < shaders.length; i++){
futures.push(getShader(shaders[i].id));
names.push(shaders[i].id);
}
return Promise.all(shaders).then(function(results){
var obj = {};
names.forEach(function(name, i){
obj[name] = results[i];
});
return obj;
});
}这会让你做：
loadAllShaders().then(function(map){
map["fragment-shader"]; // contains the content of the shader
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29584018
复制相关文章
相似问题
腾讯云开发者
