Динамическая загрузка скрипта JavaScript в приложении Vue. js - PullRequest
Новая
       0

Динамическая загрузка скрипта JavaScript в приложении Vue. js

1 голос
/ 25 мая 2020

Как я могу динамически загрузить сценарий JavaScript в приложение Vue. js?

Вот наивное решение: 

    <script async v-bind:src="srcUrl"></script>
    <!--<script async src="https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37"></script>-->

Но в первой строке нет t загрузить скрипт (он не добавляет элемент script к HTML).

Вторая строка работает. Вторая строка идентична, только переменная приложения заменена простым текстом (srcUrl => https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37).

Где моя ошибка?

Полная демонстрация для справки (предполагается, что загружается Google Система пользовательского поиска на пустой странице): 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="load-script">
    <div>{{ srcUrl }}</div>
    <div class="gcse-searchbox"></div>
    <div class="gcse-searchresults"></div>
    <script async v-bind:src="srcUrl"></script>
    <!--<script async src="https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37"></script>-->
</div>
<script>
    new Vue({
        el: '#load-script',
        data: {
            srcUrl: "https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37"
        }
    });
</script>
</body>
</html>

Я нашел похожие вопросы, но они, похоже, не совсем точно описывают эту ситуацию:

1 Ответ

1 голос
/ 25 мая 2020

Вы можете динамически добавить элемент <script> в DOM в любое время.

Если вы используете Vue, вы можете использовать его свойство mounted, чтобы добавить скрипт в load-script div при загрузке страницы: 

Vue({
  mounted: function () {
    let divScripts = document.getElementById('load-script');
    let newScript = document.createElement('script');
    newScript.src = 'https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37';
    divScripts.appendChild(newScript);
  }
});

Альтернативный метод - используйте LoadScript

в качестве альтернативы добавлению функции в свойство mounted Vue существует простой Vue плагин с именем LoadScript , который загружает и выгружает скрипты. 

import LoadScript from 'vue-plugin-load-script';
Vue.use(LoadScript);

Для загрузки скрипта: 

Vue.loadScript('https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37')
  .then(() => {
    // do something after script loads
  })
  .catch(() => {
    // do something if load fails
  });

Для выгрузки скрипт: 

Vue.unloadScript('https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37')
  .then(() => {
    // do something after script unloads
  })
  .catch(() => {
    // do something if unload fails
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...