Meteor JS：使用外部脚本

IT技术 javascript meteor
2021-03-11 22:11:16

有一些服务（如 FB like 或 AddThis）提供了一段代码。看起来像

<div class="service-name" data-something="x"></div>
<script type="text/javascript" src="http://service-domain.com/service-name.js"></script>

好的，很酷，所以通常你将它粘贴到你的 HTML 中，它就可以工作了。不与流星。

这是我所看到的：

  • <script>模板/正文内部未加载- 我在资源中没有看到它，Meteor 中的某些内容实际上阻止浏览器将其识别为 JS 文件
  • 它从 <head>

现在这里是问题和问题：

  1. 我不想从<head>- 因为速度加载它
  2. 即使我从那里加载它——我们有 QA 和 PROD 环境。他们必须从不同的域加载这个脚本（比如 service-domain-qa.com 与 service-domain.com）

令人惊讶的是，您不能在<head>.

使用传统框架，这根本不是问题——你可以在任何地方包含脚本，它们只是加载；您可以在服务器模板的任何部分使用逻辑/变量。

那么，我应该如何在 Meteor 中做到这一点？让我重复一遍：

  • 我需要将一些外部脚本（托管在第 3 方域上）加载到我的应用程序页面中
  • 无法将此脚本保存到我的项目文件夹中
  • 脚本路径取决于环境（我们已经有了设置系统），所以渲染它的模板的位置应该从代码中传递一些数据

我知道通过在 Template.created 上从我的代码（使用 LAB.js 或其他任何东西）加载动态脚本来实现这一点的方法，但这太过分了......

6个回答

<script>正文或模板中的标签不会由 Meteor 执行，它们会被解析，然后由 Meteor 的模板系统处理。您不能指望其中任何一个中的脚本标记像普通 HTML 页面一样工作。

解决方案是使用模板事件（您可以在其中手动将脚本标记附加到正文或其他内容）或像您说的那样动态加载它。这不是矫枉过正，这就是 Meteor 的工作方式——记住，没有传统的 HTML 页面或正文，只有 Meteor API，而 Meteor API 指定为了加载和执行外部脚本，您必须使用适当的 API 方法。

我不明白为什么流星不会发出有关未执行标签的警告。
2021-04-24 22:11:16
归根结底，它是浏览器中的 HTML。很奇怪，插入到页面中的脚本标签不仅能正常工作。有什么奇怪的 - 你们认为没关系:)
2021-04-29 22:11:16
因为有一个很好的理由 - Meteor 为您完全管理 DOM，并且可能会根据反应性重新插入元素或移动内容。因此，仅仅在正文中放置一个脚本并期望它起作用是没有意义的；如果模板重新渲染，它会被重新执行并弄乱一切。这就是为什么你可以把它放在头上，它会这样工作。或者，Meteor 提供了我在回答中描述的替代方案。由您从这两个选项中进行选择。
2021-05-03 22:11:16
是否有 Template.name.rendered 手动附加脚本标记的示例？
2021-05-05 22:11:16
“因此，仅仅在主体中放置一个脚本并期望它起作用是没有意义的；如果模板重新渲染，它会被重新执行并把一切都搞砸”——嗯，我听说过一个传说 {{#constant}}
2021-05-20 22:11:16

我的解决方案是使用包。有关更多详细信息，请参阅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>

如果您使用 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（大气js.com/manuelschoebel/wait-on-lib ）
2021-05-03 22:11:16

为什么不使用 jQuery 的 getscript？

http://api.jquery.com/jquery.getscript/

您可以添加回调函数

这很棒，但是我该怎么做才能在服务器端实现类似的功能呢？（因此，我得到一个“$ 未定义”错误，我假设是因为 jQuery 在服务器上不可用。
2021-05-03 22:11:16
为核心功能添加大量外部库是不可行的。
2021-05-06 22:11:16
@RuneJeppesen 他们改变了文档中的措辞。对于 Underscore 和其他一些包，它曾经有一个红色警告，内容是“即使这个库包含在框架中，您也应该选择加入它，因为我们可能会更改它”。
2021-05-20 22:11:16

您可以使用类似yepnope 的东西 异步加载脚本。我使用它在需要时加载传单。我开始转向通过 yepnope 加载更多脚本，以便我的应用程序在初始页面加载时呈现最低限度。我将 yepnope 的东西放在 Template.created 中。

甜蜜的建议！+1 已添加 :)
2021-05-01 22:11:16
yepnope 已被弃用。
2021-05-13 22:11:16
其它你可能感兴趣的问题
上一篇命令键的 jQuery 键码 下一篇如何使用 JavaScript 检查按钮是否被点击