3

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?

Ryan
  • 14,682
  • 32
  • 106
  • 179
  • 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 Mar 12 '19 at 09:40
  • Does your app uses [Content Security Policy](https://content-security-policy.com/) (CSP)? – jelhan Mar 14 '19 at 19:02

4 Answers4

5

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

Gennady Dogaev
  • 5,902
  • 1
  • 15
  • 23
  • The StackOverflow question mentioned above also tells you why your jQuery approach is failing. Have a look at [this](https://stackoverflow.com/a/18785133/3167221) answer. Rewriting your jQuery approach in vanilla JS should solve your issue. – jelhan Mar 14 '19 at 19:08
3

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

loki
  • 187
  • 2
  • 14
  • Can you load `your-script.js` from a remote server? As in, `https://external.com/your-script.js`? – Ryan Mar 13 '19 at 17:55
3

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.

rinold simon
  • 2,782
  • 4
  • 20
  • 39
  • Thanks! Is there a way to call the js remotely? What if the remote file is updated? – Ryan Mar 14 '19 at 01:49
  • 1
    First thing is that no JS file will be dynamically updated each and every sec or day. There will a release cycle. So you no need to worry about that. Please follow my above solution or even you can give a try for below options too, 1) Look is there any `npm package` for the js you are looking for. If so include that package in your `package.json` file. 2) You can add this `document.writeln("");` or `$.getScript('https/path/to/ext-js-file-name.js')` in your js file – rinold simon Mar 14 '19 at 04:28
0

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

JC Hernández
  • 777
  • 3
  • 13