Как можно подключить библиотеку в самом скрипте?

Question

[neuro4live]

Здравствуйте! Мне необходимо подключить плагин imask.js в самом коде js
Вот мой пример кода:

var sc = document.createElement("script");
sc.setAttribute("src", "https://unpkg.com/imask@6.2.2/dist/imask.js");
sc.setAttribute("type", "text/javascript");
document.head.appendChild(sc);





var element = document.getElementById('phone');
var maskOptions = {
    mask: '[phone]',
    lazy: false
}
var mask = new IMask(element, maskOptions);

При таком варианте плагин не вставляется. Если вставить в html перед скриптом который добавляет маску ввода, добавить тэг скрипт с ссылкой на библиотеку, тогда всё работает. Пожалуйста подскажите где ошибка.

Answer 1

[Alex_mos]

А почему не подключить в HTML?

Comments

[edward_freedom]

твой вопрос это решение задачи?

[Alex_mos]

edward_freedom, возможно от части) мне просто интересно если в дальнейшем придется подключать ещё что то как это будет реализовываться(если делать так как в коде)

[edward_freedom]

Alex_mos, на какой конкретно вопрос отвечает твой ответ? Почему тебя так удивляет динамическое подключение скриптов?

[neuro4live]

Потомучто мне необходимо использовать этот скрипт через плагин в хроме, в качестве надстройки на другом сайте

[Alex_mos]

edward_freedom, да, мой косяк, что то тупанул)) почему то подумал что тег скрипт должен быть один....

[Alex_mos]

neuro4live, а что пишет по итогу?

[neuro4live]

Alex_mos, Uncaught ReferenceError: IMask is not defined

[Alex_mos]

neuro4live, может предложение глупое но попробуй прописать так
sc.setAttribute("src", "https://unpkg.com/imask");

Answer 2

[GrayHorse]

Дождись загрузки скрипта.

function appendScript(src, integrity) {
    return new Promise((resolve, reject) => {
        const script = document.createElement("script");
        script.onload = resolve;
        script.onerror = event => reject({message: "Failed to load script", src, integrity, event});
        script.src = src;
        script.async = true;
        if (integrity) {
            script.integrity = integrity;
            script.crossOrigin = "anonymous";
        }
        document.body.append(script);
    });
}

Comments

[neuro4live]

Не могли бы вы указать полный пример кода? не получается загрузить скрипт

[Kirgus]

получаешь объект скрипта, добавленного в DOM, и пишешь:
scriptElem.onload = () => {функция_из_подключенного_скрипта()}

[GrayHorse]

await appendScript(src, integrity);

[neuro4live]

GrayHorse, В качестве аргумента integrity в данном случае что нужно указать?

[GrayHorse]

Ничего, если есть такой вопрос.