В javascript нет импорта / включения / запроса, но есть два основных способа достичь желаемого:
1 - Вы можете загрузить его с помощью вызова AJAX, а затем использовать eval.
Это самый простой способ, но он ограничен вашим доменом из-за настроек безопасности Javascript, а использование eval открывает путь к ошибкам и взломам.
2 - Добавить тег сценария с URL-адресом сценария в HTML.
Определенно лучший путь. Вы можете загрузить скрипт даже с чужого сервера, и он чист, поскольку вы используете анализатор браузера для оценки кода. Вы можете поместить тег в заголовок веб-страницы или внизу тела.
Оба эти решения обсуждаются и иллюстрируются здесь.
Теперь есть большая проблема, о которой вы должны знать. Это подразумевает, что вы загружаете код удаленно. Современные веб-браузеры загружают файл и продолжают выполнять ваш текущий скрипт, потому что они загружают все асинхронно для улучшения производительности.
Это означает, что если вы будете использовать эти приемы напрямую, вы не сможете использовать свой недавно загруженный код на следующей строке после того, как попросили его загрузить, поскольку он все еще будет загружаться.
E.G: my_lovely_script.js содержит MySuperObject
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
Затем вы перезагрузите страницу, нажав F5. И это работает! Смешение ...
Так что с этим делать?
Ну, вы можете использовать взлом, который предлагает автор, по ссылке, которую я вам дал. Таким образом, для спешащих людей он использует событие en для запуска функции обратного вызова при загрузке скрипта. Таким образом, вы можете поместить весь код с помощью удаленной библиотеки в функцию обратного вызова. E.G:
function loadScript(url, callback)
{
// adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// then bind the event to the callback function
// there are several events for cross browser compatibility
script.onreadystatechange = callback;
script.onload = callback;
// fire the loading
head.appendChild(script);
}
Затем вы пишете код, который хотите использовать ПОСЛЕ того, как скрипт загружается в лямбда-функцию:
var myPrettyCode = function() {
// here, do what ever you want
};
Затем вы запускаете все это:
loadScript("my_lovely_script.js", myPrettyCode);
Хорошо, я понял. Но писать все эти вещи - боль.
Ну, в этом случае вы можете использовать как всегда фантастический бесплатный фреймворк jQuery, который позволяет вам делать одно и то же в одной строке:
$.getScript("my_lovely_script.js", function() {
alert("Script loaded and executed.");
// here you can use anything you defined in the loaded script
});