如何在不触及index.html的情况下将外部javascript标记添加到Ember JS应用程序？

Question

是否可以在Ember中加载外部javascript资源而无需触及index.html？

如果我可以添加到html，我只需添加以下内容即可。

    <script type="text/javascript">var my_data = [{ foo: "bar", value: 1.234 }];</script>
    <script type="text/javascript" async src="https://external.com/file.js"></script>
</body>

我尝试使用jQuery附加标记，但它实际上不会在客户端上启动javascript：

$('body').append('<script type="text/javascript">var my_data = [{ foo: "bar", value: 1.234 }];</script>');
$('body').append('<script type="text/javascript" async src="https://external.com/file.js"></script>');

凡file.js发送my_data到external.com 。

不幸的是，我正在为无法访问index.html的客户端构建单页面应用程序。 你建议附加两个脚本标签？ 可能吗？

它变得更糟。 我需要在用户点击事件后再次将my_data发送到external.com 。

在传统的html环境中，我会做以下事情:(这是有效的）

page1.html：

    <a href="/page2.html">user action to track</a>
    <script type="text/javascript">var my_data = [{ foo: "bar", value: 1234 }];</script>
    <script type="text/javascript" async src="https://external.com/file.js"></script>
</body>

page2.html：

    <script type="text/javascript">var my_data = [{ foo: "qux", value: 4321 }];</script>
    <script type="text/javascript" async src="https://external.com/file.js"></script>
</body>

如何在单页面应用程序中使用Javascript完成相同的结果，而无需触及index.html？

Answer 1

如果您使用的是ember-cli，可以尝试使用ember-cli-head插件。

否则，您可以尝试将此问题的答案和应用程序初始化程序中描述的js技术之一结合起来

Answer 2

您可以安装addon ember-cli-inline-content

然后在<body>里面加入index.html

{{content-for "your-script-name"}}

然后在ember-cli-build.js

    ...
    inlineContent: {
      'your-script-name' : {
        file: './public/assets/externalJs/your-script.js'
        }
      }

你的外部脚本是public/assets/externalJs/your-script.js

<script type="text/javascript">
  var my_data = [{ foo: "bar", value: 1234 }];
</script>

再次运行ember s

希望这可以帮助

Answer 3

供应商目录，它是复制和粘贴的第三方JavaScript的常见主目录。

在您的情况下，下载外部/第三方JavaScript文件并将其粘贴到app-name/vendor/ext-js-file-name.js

然后你需要在ember-cli-build.js文件中导入ext-js-file-name.js

module.exports = function(defaults) {
  ...
  app.import('vendor/ext-js-file-name.js');
  ...
}

完成后，请restart您的余烬服务器。 因此，在ember-cli-build.js下导入的js文件被编译包含在ember应用程序的头部，然后可以在应用程序的各个位置全局使用。

没有必要在index.html下包含js

如果您需要有关资产，依赖关系和编译的更多详细信息，请查看官方ember文档页面中的资产编译。

Answer 4

在某个地方运行：

<script>
 var my_data = [{ foo: "bar", value: 1.234 }];
 var jq = document.createElement('script');
 jq.src = "https://external.com/file.js?version=20190320114623";
 document.getElementsByTagName('head')[0].appendChild(jq);
</script>

通过添加您知道每次文件更改时将更改的内容（文件修改日期的时间戳或您可以控制的变量）来控制缓存.js文件。

编辑

如何在不触及index.html的情况下将外部javascript标记添加到Ember JS应用程序？

问题描述

4 个解决方案

解决方案1
3 2019-03-12 09:55:52

解决方案2
3 2019-03-13 11:37:31

解决方案3
2 2019-03-13 19:41:53

解决方案4
0 2019-03-20 16:44:25

如何在不触及index.html的情况下将外部javascript标记添加到Ember JS应用程序？

问题描述

4 个解决方案

解决方案1 3 2019-03-12 09:55:52

解决方案2 3 2019-03-13 11:37:31

解决方案3 2 2019-03-13 19:41:53

解决方案4 0 2019-03-20 16:44:25

解决方案1
3 2019-03-12 09:55:52

解决方案2
3 2019-03-13 11:37:31

解决方案3
2 2019-03-13 19:41:53

解决方案4
0 2019-03-20 16:44:25