使用Javascript获取脚本文件的内容

问题描述 投票：12回答：8

我的网页中有以下脚本元素。

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

使用JavaScript，我希望能够检索 脚本文件的内容。我知道我可以使用ajax请求来获取数据，但是这样的话，我就会从服务器上获取一些我本地已经有的东西。

所以，我更想做的是从DOM中获取内容（如果可能的话），或者其他有相同结果的东西。

CheersAnthony

更新

我是想把问题简单化，也许是个不好的想法，我想这样会少引起一些问题。

我的真实情况如下，其实我有 

<script type="text/html" class="jq-ItemTemplate_Approval">
   ...
   html template that is going to be consumed by jQuery and jTemplate
   ...
</script>

现在这样做很好，但这意味着每次页面加载时，我都必须将模板作为主页面HTML的一部分发送下去。所以我的计划是这样做的。

<script src="template.html" type="text/html"></script>

这意味着浏览器会缓存template.html的内容 而我就不用每次都把它发下来了。但要做到这一点，我需要能够从文件中获取内容。

另外，在这种情况下，据我所知，通过ajax请求内容不会有太大的帮助，因为无论如何，它必须回到服务器上获取内容。

javascript html dom scripting
8个回答
2
投票

我想你要做的是在template.js中分配一个变量。然后你就可以在jquery中的任何地方使用这个变量。就像这样。

var tpl = "<div> ... </div>"

这样不是更简单地解决了你的问题吗？我们在Ext JS中就是这么做的。我想这在jQuery中也能用。

5
投票

如果我没有理解错的话，你不是想用Ajax加载html模板文本，而是想让它和页面的其他部分一起加载。如果你控制了服务器端，你总是可以将模板文本包含在一个不可见的div标签中，然后你从Javascript中引用。

<div id="template" style="display:none;">
...template text...
</div>
<script>
// pops up the template text.
alert(document.getElementById("template").innerHTML);
</script>

如果你只是想加载模板，这样你就可以把它缓存起来， 你可以把内容放在一个变量里，像这样：

<script>
var template = "template text..";
</script>

或者你可以使用ajax加载模板，并将模板存储在一个变量中，这样它就可以被访问。这在jquery中是很简单的。

var template;
$.get("template.html", function(data){
  template = data;
});
4
投票

除非你在页面中以文字形式加载一个脚本，否则它不会作为文本存在。它被浏览器解释，并和其他脚本一起融合到运行时。

如果你想要源码，你必须再次获取它，如果使用Ajax获取响应文本。

它将来自浏览器的缓存，而不必再次下载。

2
投票

你可以获取脚本的src属性，然后用XHR获取JS文件的内容。这是个更干净的方法，例如：-。

if(window.XMLHttpRequest) {
                var xhr = new XMLHttpRequest();         
                xhr.onreadystatechange = function() {
                    if(xhr.status == 200 && xhr.readyState == 4) {
                        var sourceCode = xhr.responseText;
                                            alert('The source code is:-\n'+sourceCode);
                    }
                }
                xhr.open("GET",document.getElementById('scriptID').src,true);
                xhr.send(null);
            }
1
投票

使用iFrame &HTML5本地存储空间

保存模板以便以后渲染......

虽然对iFrame不是很满意，但似乎效果不错（还没有进行性能测试）。

将iFrame放在你想要的模板页面上（index.html）。

<html>
  <head>
    <iframe src="mustache.Users.html" onload="this.remove();" class="hidden" id="users_template"></iframe>
  </head>
</html>
  • 确保 原产地 属性被设置为
  • 隐蔽 元素，直到你能在它加载后摆脱它为止。

在你的模板(mustache.Users.html)上放上这个body wrapper。

(不用担心它不会出现在模板中)

<body onload="localStorage.setItem('users_template',this.document.body.innerHTML);"> 
  <ul class="list-group" id="users" >
    {{#users}}<li>{{name}}</li>{{/users}}
  </ul>
</body>
  • 替换 'users_template'，用你的变量的任何名称来表示
  • 的"。负载'属性在加载时将模板保存到localStorage中。

现在您可以从任何地方访问您的模板 

localStorage.getItem('users_template')

或 

window.localStorage.getItem('users_template')

check out this image to see it in Chrome

0
投票

JavaScript文件里有什么？ 如果是实际的代码，你可以在里面运行函数和引用变量，就像你把它们剪切并粘贴到网页中一样。 你会想在任何引用它的脚本块上面加上包含行。

这就是你要实现的目标吗？

0
投票

为什么不使用Ajax（好吧，Ajah，因为它是html:-)）？

当服务器设置正确，并且没有发送无缓存或过去的过期头，浏览器将缓存它。

0
投票

大多数JavaScript导入文件的工作方式是它们包含一个脚本，立即调用一个带有特定文本参数的函数，或另一个函数。为了更好的说明，比如你有你的主index.html文件，这样设置。

<html>
<head>
</head>
<body>
<script>
let modules = {};
function started(moduleName, srcTxt) {
    modules[moduleName] = (srcTxt) //or something similar
}
</script>

<!--now you can include other script tags, and any script tags that will be included, their source can be gotten (if set up right, see later)-->

<script src="someOtherFile.js"></script>
</body>
</html>

现在制作另一个文件 someOtherFile.js当它被加载时，只需调用 "started "函数就可以了，这个函数应该已经在作用域中被声明了，当它被声明后，无论从文件中传递了什么文本，都会被存储在主index.html文件中。例如，你甚至可以将整个函数字符串化，并将其放入其中。

started("superModule", (function() {
    /*
    <?myCustomTemplateLanguage
    <div>
    {something}Entire Javascript / html template file goes here!!{/something}
    </div>
    ?>
    */
}).toString());

现在你可以访问函数的内部内容, 并得到注释之间的所有文本, 或者更好的是, 做其他的解析等, 或者在注释的开头和结尾做一些其他的解析标识, 如上图所示, 并得到这些注释之间的所有文本.

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.