How can I add an external javascript tag to an Ember JS app without touching the index.html?
Question
Is it possible to load an external javascript resource in Ember without touching index.html?
If I could add to html, I would simply add the following and it works.
<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:
$('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 .
Unfortunately I'm building a single-page-app for a client without access to 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.
In a traditional html environment I would do the following: (this works)
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>
How can I accomplish the same result in Javascript, on a single-page-app, without touching index.html?
4 answers
solution1
3 2019-03-12 09:55:52
If you are using ember-cli, you can try ember-cli-head addon.
Otherwise, you can try to combine one of js techniques described in answers to this question and application initializer
solution2
3 2019-03-13 11:37:31
You can install addon ember-cli-inline-content
Then add into your index.html inside <body>
{{content-for "your-script-name"}}
Then inside ember-cli-build.js
...
inlineContent: {
'your-script-name' : {
file: './public/assets/externalJs/your-script.js'
}
}
Your external script public/assets/externalJs/your-script.js
<script type="text/javascript">
var my_data = [{ foo: "bar", value: 1234 }];
</script>
Run ember s again
Hope this helps
solution3
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.
In your case download the external/third-party JavaScript file and paste it under app-name/vendor/ext-js-file-name.js
Then you need to import ext-js-file-name.js in ember-cli-build.js file
module.exports = function(defaults) {
...
app.import('vendor/ext-js-file-name.js');
...
}
When this is done kindly restart your ember server. 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.
There is no further need of including the js under index.html
Please look at the asset compilation from the official ember documentaton page if you need further details about assets, dependencies and compilations.
solution4
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).
Edit
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.