使用 jquery 读取外部脚本标签的内容答案

【问题标题】：Read content of external script tag with jquery使用 jquery 读取外部脚本标签的内容
【发布时间】：2012-03-15 17:10:58
【问题描述】：

加载主干模板的常见模式如下：

<script type='text/template' id='foo'>
    my template
</script>

----
var whatever = $('#foo').html();

我想将脚本包含在一个外部文件中，如下所示：

<script type='text/template' id='foo' src='myTemplate.tpl'></script>

但是foo 的html() 现在是空的。

我看到浏览器拉下模板文件，但我不确定它是否在页面 dom 中。有没有一种简单的方法可以在 javascript 中引用脚本的内容，还是浏览器直接忽略它并抛出结果？

【问题讨论】：

你试过在 document.ready 上做吗？
是的，在 document.ready 之后一切都运行良好
从优化的角度来看，如果模板是内联的，或者被声明为 javascript 变量，您的页面将加载得更快。加载页面上的每个外部资源都会产生 HTTP 开销。您至少应该在它们上使用defer 或async，以便浏览器知道它可以将它们与其他所有内容一起加载并且不必阻止
你试过没有 jQuery 吗？我想document.getElementById("foo").textContent
您没有遇到无提示的安全错误吗？跨域（或本地主机）请求不允许您获取内容，它们可能会返回一个空字符串。

【解决方案1】：

我认为要实际执行外部加载的脚本，您必须对内容执行 eval()。您并没有将它添加到 DOM 中，因为它是脚本，而是将其添加到 JS 运行时。可能还有其他方法可以做到这一点，但 eval() 通常被认为是一个安全漏洞，因为可以评估恶意代码。

我倾向于在服务器上生成模板部分，这样我就知道当 DOM 准备好时我的所有 JS 都在那里。

【讨论】：

我想我可能需要走这条路，只是让服务器将文件内容内联。
如果您的模板中有缩小的代码，请小心。请注意后端如何呈现 HTML/JS。我遇到了一些奇怪的问题，即不同的后端在反流期间如何解释空格和换行符。只是一个警告，以防您开始对奇怪的错误感到困惑。

【解决方案2】：

如果要在脚本加载后立即执行操作，您可以在脚本标记上放置onload 属性。如果你想在运行时下载内容，那么你可以使用异步下载策略（就像 Gats 指出的那样）。

在外部文件中使用 jquery 模板时，请记住一些要点，有一个有趣的 article 关于带有外部文件的 jquery 模板，你必须检查它。

【讨论】：