использовать библиотеку cdn в vue js - PullRequest
Новая
       24

использовать библиотеку cdn в vue js

0 голосов
/ 17 февраля 2020

У меня есть этот фрагмент кода, и я должен использовать эту библиотеку для моего vue js проекта: я поместил это в мой index.html: 

<script type="text/javascript">
  !function(){function t(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,localStorage.getItem("rayToken")?t.src="https://app.raychat.io/scripts/js/"+o+"?rid="+localStorage.getItem("rayToken")+"&href="+window.location.href:t.src="https://app.raychat.io/scripts/js/"+o;var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}var e=document,a=window,o="17a4bb2d-06c8-480d-ba58-045c86187534";"complete"==e.readyState?t():a.attachEvent?a.attachEvent("onload",t):a.addEventListener("load",t,!1)}();
</script>

проблема Я хочу использовать функцию этого внутри created хука в App.vue, и я получаю неопределенный, и когда я использую эту функцию с задержкой, она работает. Как я могу убедиться, что библиотека полностью загружена, а затем использовать эту функцию.

в чем решение ??

Приложение. vue: 

          Raychat.setUser({
                email: this.$store.state.userInfo.email,
                name: this.$store.state.userInfo.name,
                phone: this.$store.state.userInfo.phone,
                updateOnce: true
           })

1 Ответ

0 голосов
/ 17 февраля 2020

Есть несколько способов сделать это, и это действительно зависит от того, какую часть кода вы хотите редактировать. Если вы действительно можете обновить / изменить код для встраивания, вы можете вместо того, чтобы создавать новый элемент <script>, позволить ему изменить src ранее существовавшего пустого элемента <script>, к которому вы можете прикрепить слушатель события к. Я удалил числовую строку base64 для переменной o, поскольку это может быть конфиденциальная информация: 

<script type="text/javascript" id="raychat-script"></script>
<script type="text/javascript">
  !function(){function t(){var t=document.querySelector('#raychat-script');t.type="text/javascript",t.async=!0,localStorage.getItem("rayToken")?t.src="https://app.raychat.io/scripts/js/"+o+"?rid="+localStorage.getItem("rayToken")+"&href="+window.location.href:t.src="https://app.raychat.io/scripts/js/"+o;var e=document.getElementsByTagName("script")[0];}var e=document,a=window,o="...";"complete"==e.readyState?t():a.attachEvent?a.attachEvent("onload",t):a.addEventListener("load",t,!1)}();
</script>

Затем вы можете просто прослушать событие load в #raychat-script и вызвать логи c что вам нужно: 

document.querySelector('#raychat-script').addEventListener('load', () => {
    // When the third party script is loaded
});

Предупреждение: Главный недостаток этого метода заключается в том, что если другой разработчик перезаписывает ваш код для встраивания или компания меняет свою стратегию, он может не работа.

Если это не альтернатива, ваш единственный путь - пассивное решение, которое включает в себя создание какого-то метода опроса, который просто проверяет, возможен ли доступ к переменной Raychat: 

let timer;
let attempts = 10;
const interval = 250;

function onRaychatLoadedCallback() {
    // Logic here
}

timer = window.setInterval(() => {
    if (attempts <= 0) {
        window.clearInterval(timer);
        console.warn(`Waited for ${attempts * interval / 1000}s, unable to detect if Raychat is loaded`);
        return;
    }

    if (Raychat && typeof Raychat === 'function') {
        window.clearInterval(timer);
        onRaychatLoadedCallback();
    }

    attempts--;
}, interval);
...