Question

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

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

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

所以我更喜欢从DOM中检索内容（如果可能的话）或具有相同结果的内容。

干杯安东尼

更新

我试图简化这个问题，也许是一个糟糕的想法，我认为这样会减少问题。

我的实际情况如下，我实际上已经

<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请求内容不会对此有所帮助，因为它必须回到服务器才能获取内容。

Answer 1

如果我理解正确，您不希望使用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;
});

Answer 2

除非您在页面中将脚本作为文字文本加载，否则它不会作为文本存在。它由浏览器解释并与任何其他脚本一起融入运行时。

如果你想要源，你必须再次获取它，如果使用Ajax获取responseText。

它将来自浏览器缓存，无需再次下载。

Answer 3

我认为你想要做的是在template.js中分配一个变量。然后，您可以在jquery中的任何位置使用该变量。类似的东西：

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

这不是解决问题的简单方法吗？我们在Ext JS中这样做。我认为这对jQuery有用。

Answer 4

您可以获取脚本的src属性，然后使用XHR获取JS文件的内容。这是IMO的一种更清洁的方式。 e.g： -

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);
            }

Answer 5

使用iFrame＆amp; HTML5本地存储

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

没有提及iFrame，但似乎工作得很好（尚未运行性能测试）

将iFrame放在您希望模板打开的页面上（index.html）

<html>
  <head>
    <iframe src="mustache.Users.html" onload="this.remove();" class="hidden" id="users_template"></iframe>
  </head>
</html>

确保 src 属性已设置
隐藏元素，直到您可以在加载后删除它

将此身体包装放在模板周围（mustache.Users.html）

（不要担心它不会出现在模板中）

<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”替换为您变量的名称

' onload '属性在加载期间将模板保存到localStorage

现在您可以随时随地访问模板

localStorage.getItem('users_template')

OR

window.localStorage.getItem('users_template')

Answer 6

JavaScript文件中包含哪些内容？如果它是实际代码，您可以在其中运行函数和引用变量，就像您已将它们剪切并粘贴到网页中一样。您需要将include行放在引用它的任何脚本块之上。

这是你想要完成的事情吗？

Answer 7

为什么不使用Ajax（以及Ajah，因为它的html： - ））？

如果服务器设置正确并且没有发送no-cache或过去的expires标头，浏览器将对其进行缓存。

Answer 8

大多数JavaScript导入文件的工作方式是它们包括一个脚本，该脚本立即调用带有某些文本或另一个函数的参数的函数。为了更好地说明，假设您有主index.html文件，请按以下步骤进行设置：

BLoC

现在制作另一个文件Dashboard，并在加载后立即调用该函数，该函数应该已经在范围中声明了“开始”函数，完成后，无论从哪里传递文本该文件存储在主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>

现在您可以访问函数的内部内容，并获取注释之间的所有文本，或者更好的是，然后进行其他解析等，或在注释的开头和结尾进行某种其他类型的解析标识符，如上所示，并获得介于两者之间的所有文本

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

8 个答案:

使用iFrame＆amp; HTML5本地存储