Meteor JS：使用外部脚本
Posted
技术标签:
【中文标题】Meteor JS：使用外部脚本【英文标题】：Meteor JS: use external script 【发布时间】：2013-01-01 14:56:54 【问题描述】：有些服务（如 FB like 或 AddThis）提供了 sn-p 代码。 好像
<div class="service-name" data-something="x"></div>
<script type="text/javascript" src="http://service-domain.com/service-name.js"></script>
好的，很酷，所以通常你将它粘贴到你的 html 中，它就可以工作了。不是 Meteor。
这是我看到的：
<script> 模板/正文内部 未加载 -- 我在资源中没有看到它，Meteor 中的某些内容实际上阻止了浏览器将其识别为 JS 文件
它从<head>工作
下面是问题和疑问：
-
我不想从
<head> 加载它——因为速度原因
即使我从那里加载它——我们也有 QA 和 PROD 环境。他们必须从不同的域（如 service-domain-qa.com 与 service-domain.com）加载此脚本
令人惊讶的是，您不能在<head> 中使用模板助手/变量。
对于传统框架，这根本不是问题 - 您可以在任何地方包含脚本，它们只需加载即可；您可以在服务器模板的任何部分使用逻辑/变量。
那么，我应该如何在 Meteor 中做到这一点？ 让我重复一遍：
我需要将一些外部脚本（托管在第 3 方域上）加载到我的应用页面中 将此脚本保存到我的项目文件夹中不是一种选择 脚本路径取决于环境（我们已经有了设置系统），所以渲染它的模板的位置应该从代码中传递一些数据我知道如何通过在 Template.created 上从我的代码（使用 LAB.js 或其他）加载动态脚本来实现这一点，但这太过分了......
【问题讨论】：
Meteor 1.2-rc.7（可能还有更早的版本）现在执行这些脚本。 【参考方案1】：<script> 正文或模板中的标签不由 Meteor 执行，它们由 Meteor 的模板系统解析然后处理。您不能期望其中任何一个中的脚本标记都能像普通 HTML 页面那样工作。
解决方案是使用模板事件（您可以手动将脚本标记附加到正文或其他内容）或像您说的那样动态加载它。这不是矫枉过正，这就是 Meteor 的工作方式 - 请记住，没有传统的 HTML 页面或正文，只有 Meteor API，而且 Meteor API 规定，为了加载和执行外部脚本，您必须使用适当的 API 方法。
【讨论】：
最终它是浏览器中的 HTML。很奇怪，插入页面的脚本标签不是正常工作。有什么奇怪的-你们认为没关系:) 因为有一个很好的理由 - Meteor 完全为您管理 DOM，并且可能会根据反应性重新插入元素或移动东西。因此，只是将脚本放入正文并期望它起作用是没有意义的；如果模板重新呈现，它将被重新执行并搞砸一切。这就是为什么你可以把它放在头上，它就会这样工作。或者，正如我在回答中描述的那样，Meteor 提供了另一种选择。由您从这两个选项中进行选择。 “所以只是将脚本放在正文中并期望它工作是没有意义的；如果重新渲染模板，它将被重新执行并搞砸一切” - 嗯，我听说过一个传说'回合#constant
是否有 Template.name.rendered 手动附加脚本标签的示例？
我不明白为什么流星没有发出关于未执行标签的警告。【参考方案2】：
我的解决方案是使用包。详情请见https://github.com/meteor/meteor/tree/master/packages/spiderable。
Package.describe(
summary: "External script"
);
Package.on_use(function (api)
api.use(['templating'], 'client');
api.add_files('external_script.html', 'client');
);
<head><script type="text/javascript" src=""//mc.yandex.ru/metrika/watch.js""></script></head>
【讨论】：
【参考方案3】：如果您使用 IronRouter，您可以使用此包加载外部 scipt： https://github.com/DerMambo/wait-on-lib
Router.map( function ()
this.route('codeEditor',
waitOn: IRLibLoader.load('https://some-external.com/javascript.js')
);
);
【讨论】：
旁注：这需要包 wait-on-lib (atmospherejs.com/manuelschoebel/wait-on-lib)【参考方案4】：为什么不使用 jQuery 的 getscript？
http://api.jquery.com/jquery.getscript/
可以添加回调函数
【讨论】：
这很好，但是我可以做些什么来在服务器端实现类似的功能呢？ （有了这个我得到一个“$未定义”错误我假设是因为 jQuery 在服务器上不可用。 为核心功能添加繁重的外部库是不可行的。 @RuneJeppesen 他们改变了文档中的措辞。对于 Underscore 和其他一些软件包，它曾经有一个红色警告，类似于“即使该库包含在框架中，您也应该选择加入它，因为我们可能会更改它”。【参考方案5】：您可以使用类似yepnope 的方式异步加载脚本。我在需要时使用它来加载传单。我开始转向通过 yepnope 加载更多脚本，以便我的应用程序在初始页面加载时呈现最低限度。我将 yepnope 的东西放在 Template.created 中。
【讨论】：
好建议！ +1 添加:) yepnope 已被弃用。【参考方案6】：使用 iframe 和公共目录是我用来嵌入脚本代码的一种技巧。这是用于 google adwords 代码的，我做了我的主要 html 模板：
<iframe src="/gads.html?v=unique" seamless
scrolling="no" frameborder="0" margin margin
style="margin:0;padding:0;border:none;width:160px;height:600px"></iframe>
然后在公共目录中放置一个带有我的 google adwords 代码的 gads.html 文件，如下所示：
<html>
<head>
<style type="text/css">
*
margin: 0;
padding: 0;
</style>
</head>
<body>
<div>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-54*********";
google_ad_slot = "66******";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</body>
</html>
这有助于在页面上获取代码，尽管它远非理想（一方面，我认为它违反了 google 的服务条款）。
【讨论】：
HTML如何获取你通过<iframe src="/gads.html?v=unique">传递给它的unique参数？【参考方案7】：
我正在使用 METEOR 1.0。我已将所有外部 SCRIPT 标签放在布局模板中标签之前的 DIV 元素中。 Meteor 可以毫无问题地识别它们，并且它们是由浏览器加载的。
【讨论】：
以上是关于Meteor JS：使用外部脚本的主要内容，如果未能解决你的问题，请参考以下文章