如何在不触及index.html的情况下将外部javascript标记添加到Ember JS应用程序？
[英]How can I add an external javascript tag to an Ember JS app without touching the index.html?
问题描述
Is it possible to load an external javascript resource in Ember without touching index.html? 
是否可以在Ember中加载外部javascript资源而无需触及index.html？
If I could add to html, I would simply add the following and it works. 如果我可以添加到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>
I tried appending the tag using jQuery, but it won't actually launch the javascript on the client: 我尝试使用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>');
Where file.js sends my_data to external.com . 凡file.js发送my_data到external.com 。
Unfortunately I'm building a single-page-app for a client without access to index.html . 不幸的是，我正在为无法访问index.html的客户端构建单页面应用程序。 What do you recommend to append the two script tags? 你建议附加两个脚本标签？ Is it possible? 可能吗？
It gets worse. 它变得更糟。 I need to send my_data to external.com again after a user click event. 我需要在用户点击事件后再次将my_data发送到external.com 。
In a traditional html environment I would do the following: (this works) 在传统的html环境中，我会做以下事情:(这是有效的）
page1.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: 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>
How can I accomplish the same result in Javascript, on a single-page-app, without touching index.html? 如何在单页面应用程序中使用Javascript完成相同的结果，而无需触及index.html？
4 个解决方案
解决方案1
3 2019-03-12 09:55:52
If you are using ember-cli, you can try ember-cli-head addon. 如果您使用的是ember-cli，可以尝试使用ember-cli-head插件。
Otherwise, you can try to combine one of js techniques described in answers to this question and application initializer 否则，您可以尝试将此问题的答案和应用程序初始化程序中描述的js技术之一结合起来
解决方案2
3 2019-03-13 11:37:31
You can install addon ember-cli-inline-content 您可以安装addon ember-cli-inline-content
Then add into your index.html inside <body> 然后在<body>里面加入index.html
{{content-for "your-script-name"}}
Then inside ember-cli-build.js 然后在ember-cli-build.js
...
inlineContent: {
'your-script-name' : {
file: './public/assets/externalJs/your-script.js'
}
}
Your external script public/assets/externalJs/your-script.js 你的外部脚本是public/assets/externalJs/your-script.js
<script type="text/javascript">
var my_data = [{ foo: "bar", value: 1234 }];
</script>
Run ember s again 再次运行ember s
Hope this helps 希望这可以帮助
解决方案3
2 2019-03-13 19:41:53
The vendor directory, which is a common home for third-party JavaScript that is copied and pasted in. 供应商目录，它是复制和粘贴的第三方JavaScript的常见主目录。
In your case download the external/third-party JavaScript file and paste it under app-name/vendor/ext-js-file-name.js 在您的情况下，下载外部/第三方JavaScript文件并将其粘贴到app-name/vendor/ext-js-file-name.js
Then you need to import ext-js-file-name.js in ember-cli-build.js file 然后你需要在ember-cli-build.js文件中导入ext-js-file-name.js
module.exports = function(defaults) {
...
app.import('vendor/ext-js-file-name.js');
...
}
When this is done kindly restart your ember server. 完成后，请restart您的余烬服务器。 So the js files which is imported under ember-cli-build.js get compiled included at the head of your ember application, which can then be used globally at various places in your application. 因此，在ember-cli-build.js下导入的js文件被编译包含在ember应用程序的头部，然后可以在应用程序的各个位置全局使用。
There is no further need of including the js under index.html 没有必要在index.html下包含js
Please look at the asset compilation from the official ember documentaton page if you need further details about assets, dependencies and compilations. 如果您需要有关资产，依赖关系和编译的更多详细信息，请查看官方ember文档页面中的资产编译。
解决方案4
0 2019-03-20 16:44:25
Run this somewhere: 在某个地方运行：
<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>
Control de caching of the .js file by adding something you know that will change each time the file changes (timestamp of file modification date, or variable you can control). 通过添加您知道每次文件更改时将更改的内容（文件修改日期的时间戳或您可以控制的变量）来控制缓存.js文件。
Edit 编辑
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.