Как добавить внешний тег javascript в приложение Ember JS, не касаясь index.html? - PullRequest
Новая
       59

Как добавить внешний тег javascript в приложение Ember JS, не касаясь index.html?

2 голосов
/ 12 марта 2019

Можно ли загрузить внешний ресурс javascript в Ember, не касаясь 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

Ответы [ 4 ]

3 голосов
/ 13 марта 2019

Вы можете установить аддон ember-cli-inline-content

Затем добавьте в свой index.html внутри <body>

{{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 снова

Надеюсь, это поможет

3 голосов
/ 12 марта 2019

Если вы используете ember-cli, вы можете попробовать ember-cli-head addon.

В противном случае, вы можете попытаться объединить один из методов js, описанных в ответах на этот вопрос и инициализатор приложения

2 голосов
/ 13 марта 2019

Каталог поставщика, который является общей базой для стороннего JavaScript, который копируется и вставляется.

В вашем случае загрузите внешний / сторонний файл JavaScript и вставьте его в app-name/vendor/ext-js-file-name.js

Затем вам нужно импортировать ext-js-file-name.js в ember-cli-build.js файл 

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

Когда это будет сделано, любезно restart ваш ember сервер. Таким образом, js-файлы, импортированные в ember-cli-build.js, компилируются и включаются в заголовок вашего ember-приложения, которое затем может использоваться глобально в различных местах вашего приложения.

Больше нет необходимости включать js под index.html

Пожалуйста, посмотрите компиляцию ресурсов на официальной странице ember document * на 1019 *, если вам нужна дополнительная информация об активах, зависимостях и компиляциях.

0 голосов
/ 20 марта 2019

Запустите это где-нибудь: 

<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, добавляя что-то, что вы знаете, будет меняться при каждом изменении файла (метка времени даты изменения файла или переменная, которой вы можете управлять).

Редактировать

...