Необходимо реализовать возможность с помощью GET-запроса загружать и выполнять JavaScript-файлы, в том числе расположенные на другом домене.
Решение
Для решения задачи применим вспомогательную функцию $.getScript(url, [success(data, textStatus)]) (листинг 9.1.5).
Листинг 9 .1 .5 . Использование вспомога те л ьной ф ун к ции $.getScript()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-9-1-5</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css"> div {
width:400px; height:200px; padding:10px; margin:10px; border:3px double #369; overflow:auto;
}
</style>
<script type="text/javascript">
$(function () {
$("button:eq(0)").click(function(){
$.getScript("testGetScript.js");
});
$("button:eq(1)").click(function(){
$.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
$("div").animate({ backgroundColor: "#f00" }, 1500)
.animate({ backgroundColor: "#00f" }, 1500)
.animate({ backgroundColor: "#fff" }, 1500);
});
});
});
</script>
</head>
<body>
<button>Загрузить и выполнить локальный скрипт</button>
<button>Загрузить и выполнить скрипт с другого
домена</button>
</body>
</html>
Обсуждение
Два элемента button и элемент div — это вся HTML-разметка, приведенная в листинге 9.1.5. При нажатии на кнопки мы будем загружать и выполнять JavaScriptфайлы.
Итак, сначала разберем функцию, вызываемую при щелчке на первой кнопке. Здесь мы используем вспомогательную функцию $.getScript(), которой передаем только один аргумент — адрес загружаемого файла.
Исходный код файла testGetScript.js приведен в листинге 9.1.5а.
Листинг 9 .1 .5 a . Исходный код файла testGetScript.js
alert("Этот небольшой javascript-файл загружен и выполнен!");
В результате, при нажатии на кнопку Загрузить и выполнить локальный скрипт мы получим окно предупреждения с поясняющим текстом, т. е. на самом деле загруженный JavaScript-файл будет выполнен.
При щелчке мышью на следующей кнопке действуем похожим образом, только в аргументе url указываем абсолютный адрес JavaScript-файла jquery.color.js, расположенного на домене dev.jquery.com. Это файл плагина jQuery Color Animation, и как только он будет загружен, мы сможем использовать его функциональность в своем приложении.
Во втором аргументе можно определить функцию, вызываемую по окончании загрузки данных. Мы воспользуемся этим и передадим здесь функцию, которая найдет элемент div и будет плавно, в течение полутора секунд, изменять цвет фона элемента div с белого на красный, затем на синий и вновь на белый.
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)
Похожие посты:
- Авторитетные сайты ссылаются только на ценный материал (0)
- Ссылки даются на URL-адреса, а не на страницы (0)
- Выбор поставщика услуг по поисковой оптимизации сайта (0)
- Устранение отступа между элементом h1 и следующим за ним абзацем (0)
- Задание разных таблиц стилей для Internet Explorer 6 и 7 (0)
- Доступность и альтернативные устройства (0)
- Нужно ли отображать на сайте инструменты для изменения размера шрифта или переключения между различными таблицами стилей? (0)