Meteor JS：使用外部脚本
[英]Meteor JS: use external script
问题描述
There are some services (like FB like or AddThis) that provide a snippet of code.
有一些服务（如 FB like 或 AddThis）提供代码片段。 It looks like看起来像
<div class="service-name" data-something="x"></div>
<script type="text/javascript" src="http://example.com/service-name.js"></script>
OK, cool, so normally you paste it to your HTML and it works.好的，很酷，所以通常你将它粘贴到你的 HTML 中并且它可以工作。 Not with Meteor.不是流星。
Here's what I see:这是我看到的：
-
<script>inside of template / body is not loading -- I don't see it in Resources, something in Meteor is actually preventing browser from recognizing it as a JS file模板/正文中的<script>未加载——我在资源中没有看到它，Meteor 中的某些内容实际上阻止了浏览器将其识别为 JS 文件 - it works from
<head>它适用于<head>
Now here are the problems and questions:现在这里有问题和疑问：
- I don't want loading it from
<head>-- because of the speed我不想从<head>加载它——因为速度 - Even if I load it from there -- we have QA and PROD environments.即使我从那里加载它——我们也有 QA 和 PROD 环境。 They must load this script from different domains (like
service-domain-qa.examplevs.example.com)他们必须从不同的域（如service-domain-qa.example与example.com）加载此脚本
And surprisingly you cannot use template helpers / variables in the <head> .令人惊讶的是，您不能在<head>中使用模板助手/变量。
With traditional frameworks it's not a question at all - you can include scripts anywhere and they just load;使用传统框架，这根本不是问题——你可以在任何地方包含脚本，它们只是加载； you can use logic / variables in any part of you server templates.您可以在服务器模板的任何部分使用逻辑/变量。
So, how should I do this in Meteor?那么，我应该如何在 Meteor 中做到这一点？ Let me repeat:让我重复一遍：
- I need some external scripts (hosted on 3rd party domain) to be loaded into my app page我需要将一些外部脚本（托管在第 3 方域上）加载到我的应用页面中
- Saving this script into my project's folder is not an option将此脚本保存到我的项目文件夹中不是一种选择
- Script path depends on the environment (we already have the settings system), so the place of the template that renders it should be passed some data from the code脚本路径取决于环境（我们已经有了设置系统），所以渲染它的模板的位置应该从代码中传递一些数据
I know the way to achieve this with dynamic script loading from my code (with LAB.js or whatever) on Template.created, but this is so much an overkill...我知道如何通过 Template.created 上的代码（使用LAB.js或其他）加载动态脚本来实现这一点，但这太过分了......
7 个解决方案
解决方案1
25 已采纳 2013-01-17 23:10:26
<script> tags in body or templates aren't executed by Meteor, they are parsed and then handled by Meteor's templating system.正文或模板中的<script>标签不会由 Meteor 执行，它们会被 Meteor 的模板系统解析然后处理。 You can't expect a script tag in either of those to just work as it would with a normal HTML page.您不能期望其中任何一个中的脚本标记都能像普通 HTML 页面那样工作。
The solution is to use Template events (where you could manually append the script tag to the body or something) or load it dynamically like you said.解决方案是使用模板事件（您可以手动将脚本标签附加到正文或其他内容）或像您说的那样动态加载它。 It's not overkill, it's how Meteor works - remember, there is no traditional HTML page or body, there's just the Meteor API, and the Meteor API specifies that in order to load and execute external scripts, you must use the appropriate API methods.这不是矫枉过正，这就是 Meteor 的工作方式——记住，没有传统的 HTML 页面或正文，只有 Meteor API，而且 Meteor API 规定，为了加载和执行外部脚本，您必须使用适当的 API 方法。
解决方案2
25 2013-07-06 19:27:16
My solution is use packages.我的解决方案是使用包。 See https://github.com/meteor/meteor/tree/master/packages/spiderable for more details.有关更多详细信息，请参阅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
11 2013-11-06 18:49:30
If you are using IronRouter you can load external scipt using this package: https://github.com/DerMambo/wait-on-lib如果您使用 IronRouter，您可以使用此包加载外部 scipt： https ://github.com/DerMambo/wait-on-lib
Router.map( function () {
this.route('codeEditor',{
waitOn: IRLibLoader.load('https://some-external.com/javascript.js')
});
});
解决方案4
8 2014-01-06 08:13:34
Why not use jQuery's getscript?为什么不使用 jQuery 的 getscript？
http://api.jquery.com/jquery.getscript/ http://api.jquery.com/jquery.getscript/
You can add a callback function您可以添加回调函数
解决方案5
3 2013-02-14 01:48:26
You could use something like yepnope to load the script asynchronously.您可以使用类似yepnope的东西来异步加载脚本。 I use this to load leaflet as and when I need.我在需要时使用它来加载传单。 I'm starting to move over to loading more scripts via yepnope, so that my application renders the bare minimum on initial page load.我开始通过 yepnope 加载更多脚本，以便我的应用程序在初始页面加载时呈现最低限度。 I place the yepnope stuff inside Template.created.我将 yepnope 的东西放在 Template.created 中。
解决方案6
2 2013-05-20 19:07:09
Using iframe and the public directory was a hack I used to get script code embedded.使用 iframe 和公共目录是我用来嵌入脚本代码的一种技巧。 In this it was for google adwords code and I did this my main html template:这是针对谷歌广告代码的，我这样做是我的主要 html 模板：
<iframe src="/gads.html?v={{{unique}}}" seamless width="160" height="600"
scrolling="no" frameborder="0" marginheight="0" marginwidth="0"
style="margin:0;padding:0;border:none;width:160px;height:600px"></iframe>
and then in the public directory put an gads.html file with my google adwords code, like this:然后在公共目录中放置一个带有我的 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>
that worked to get the code on the page, although it's far from ideal (for one thing, I think it violates google's terms of service).这有助于在页面上获取代码，尽管它远非理想（一方面，我认为它违反了谷歌的服务条款）。
解决方案7
1 2014-12-31 16:25:09
I'm using METEOR 1.0.我正在使用流星 1.0。 I have put all external SCRIPT tags inside a DIV element right before the tag in the layout template.我已将所有外部 SCRIPT 标签放在布局模板中标签之前的 DIV 元素中。 Meteor recognizes them without any issue and they are loaded by browser. Meteor 可以毫无问题地识别它们，并且它们是由浏览器加载的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.