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=".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=".js"></script>');

Where file.js sends my_data to external.

Unfortunately I'm building a single-page-app for a client without access to index.html. What do you remend to append the two script tags? Is it possible?

It gets worse. I need to send my_data to external 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=".js"></script>
</body>

page2.html:

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

How can I acplish the same result in Javascript, on a single-page-app, without touching index.html?

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./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./file.js"></script>');

Where file.js sends my_data to external..

Unfortunately I'm building a single-page-app for a client without access to index.html. What do you remend to append the two script tags? Is it possible?

It gets worse. I need to send my_data to external. 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./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./file.js"></script>
</body>

How can I acplish the same result in Javascript, on a single-page-app, without touching index.html?

• javascript
• html
• ember.js
• single-page-application
• ember-cli

• 1 How is that even possible that you do not have access to index.html? Some outdated ember version with some weird self-made build process? – Gennady Dogaev Commented Mar 12, 2019 at 9:40
• Does your app uses Content Security Policy (CSP)? – jelhan Commented Mar 14, 2019 at 19:02

4 Answers 4

If you are using ember-cli, you can try ember-cli-head addon.

Otherwise, you can try to bine one of js techniques described in answers to this question and application initializer

The vendor directory, which is a mon 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 piled 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 pilation from the official ember documentaton page if you need further details about assets, dependencies and pilations.

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

Run this somewhere:

<script>
 var my_data = [{ foo: "bar", value: 1.234 }];
 var jq = document.createElement('script');
 jq.src = "https://external./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