Динамическое добавление скриптов на web-страницу
Современные динамические интерфейсы web-страниц подразумевают не только изменение содержимого различных тегов, но и динамическую подгрузку скриптов JavaScript с их последующим выполнением. Например, получение скриптов или данных для них через AJAX. Способы передачи данных я тут рассматривать не буду, а расскажу о том, как динамически добавить скрипт на сформированную web-страницу и затем выполнить его. Это можно сделать как минимум двумя способами. Первый способ - добавление скрипта средствами JavaScript с использованием стандартной функции eval. Она получает в качестве аргумента строку и, рассматривая ее содержимое как код JavaScript, пытается выполнить. Например:Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript">
- eval('function do_my_job(txt) { alert(txt); }');
- do_my_job('ok');
- </script>
Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript">
- function add_script(txt) {
- var newScript = document.createElement("script");
- newScript.type = "text/javascript";
- newScript.text = txt;
- document.getElementsByTagName('head')[0].appendChild(newScript);
- }
- </script>
И напоследок немного извращений. Попробуем не добавлять новый скрипт, а заменить исходный текст какого-нибудь уже существующего скрипта.
Code (JavaScript) : Убрать нумерацию
- <script id="myscript" type="text/javascript">
- // Скрипт, который мы будем менять
- function some_func(txt) {
- alert(txt);
- }
- </script>
- <script type="text/javascript">
- // Вызвать исходный скрипт
- some_func('first time');
- var e=document.getElementById('myscript');
- // Заменить его содержимое
- e.text='function some_func(txt) { alert (txt+" - NEW!!!"); }'
- // Вызвать измененный скрипт
- some_func('second time');
- </script>
Просмотров: 17090 | Комментариев: 15
Метки: JavaScript
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
Sibiya
(13.05.2016 в 05:51):
Privet
Малорик
(17.07.2013 в 02:31):
Автор ваще мужик. спасибо. выручил!
max
(28.12.2012 в 12:33):
весь день в гуугле просидел толку ноль...
только ваш второй скриптик решил мою проблему! СПАСИБО!
только ваш второй скриптик решил мою проблему! СПАСИБО!
w3d
(31.12.2010 в 09:47):
Неткнулся на проблему с таким решением.
Есть часть страницы перезапрашиваемая аяксом (баннеры).
Там есть код, который вешает на баннеры контекстное меню.
Если сделать запрос несколько раз подряд, то добавится несколько одинаковых скриптов и при нажатии на пункт контекстного меню функция отработает несколько раз.
Можно ли это побороть?
Есть часть страницы перезапрашиваемая аяксом (баннеры).
Там есть код, который вешает на баннеры контекстное меню.
Если сделать запрос несколько раз подряд, то добавится несколько одинаковых скриптов и при нажатии на пункт контекстного меню функция отработает несколько раз.
Можно ли это побороть?
DiFor
(08.10.2010 в 08:15):
вот мне почему то кажется что можно, както реализовывал чтото похожее, копал в сторону arguments.callee но увы потерял сорсы((
кстати насчет подмены яваскрипта во время выполнения
function tratata(){
alert('123');
}
tratata();
alert(1);
tratata=new function(){
alert('456');
}
tratata();
кстати насчет подмены яваскрипта во время выполнения
function tratata(){
alert('123');
}
tratata();
alert(1);
tratata=new function(){
alert('456');
}
tratata();
ManHunter
(07.10.2010 в 22:29):
А разве можно вызвать несуществующий метод объекта? По-моему скрипт сразу же вывалится с ошибкой.
DiFor
(07.10.2010 в 22:04):
Не знал куда написать, вдруг сталкивался. Хочу кое что реализовать, но впал в ступор потому что не могу в интернетах найти ответ. Смотри, есть объект аля:
var abc=new function(){
};
есть много всяких вызовов, свойств объекта, методом, но надо следующее, надо чтобы при обращении к ЛЮБОМУ методу который какбы относится к объекту, выдавалось имя вызываемого метода. То есть alert(abc.test1()) выдает test1 строкой, alert(abc.qwerty()) выдает qwerty строкой, методов в реальности внутри объекта может и не быть, а вот обработку надо =\ Может сталкивался?
var abc=new function(){
};
есть много всяких вызовов, свойств объекта, методом, но надо следующее, надо чтобы при обращении к ЛЮБОМУ методу который какбы относится к объекту, выдавалось имя вызываемого метода. То есть alert(abc.test1()) выдает test1 строкой, alert(abc.qwerty()) выдает qwerty строкой, методов в реальности внутри объекта может и не быть, а вот обработку надо =\ Может сталкивался?
64-ядерный процессор
(03.09.2010 в 10:16):
ManHunter, не знаю, почему вы решили, что 3 способ не работает на Firefox, Safari и Chrome. Во всяком случае у меня способ был чуть иной. Вначале выполнялся скрипт, который изменял содержимое тегов <script>. А потом изменёный скрипт запускался с кнопки, отдельно. И всё работало.
DiFor
(28.06.2010 в 22:04):
ты меня заинтриговал даже)) попробуем что нибудь сварганить
ManHunter
(28.06.2010 в 10:27):
Я имел в виду подмену src у уже имеющегося скрипта. А твой вариант да, вполне рабочий. Надо будет попробовать еще один хитрый-хитрый вариант, недавно нашел его в интернетах. Потом тисну статейку, когда разберусь.
DiFor
(28.06.2010 в 03:12):
а хотя нет, такой вот банальный пример:
<html>
<body>
<b>sss</b>
<script>
function myFunc(){
try{
var frm = document.createElement("script");
frm.setAttribute('src', 'http://192.168.75.1/test.js');
document.body.appendChild(frm);
return true;
}catch(e){};
return false;
}
</script>
<input type="submit" value="Send" onClick="myFunc();">
</body>
</html>
содержимое тест.жс:
alert('hello!');
однако работает
<html>
<body>
<b>sss</b>
<script>
function myFunc(){
try{
var frm = document.createElement("script");
frm.setAttribute('src', 'http://192.168.75.1/test.js');
document.body.appendChild(frm);
return true;
}catch(e){};
return false;
}
</script>
<input type="submit" value="Send" onClick="myFunc();">
</body>
</html>
содержимое тест.жс:
alert('hello!');
однако работает
DiFor
(28.06.2010 в 01:06):
хохо, это печально. ну что делать, будем думать как сделать
ManHunter
(27.06.2010 в 22:35):
Пробовал. Он в этом случае не отрабатывает.
DiFor
(26.06.2010 в 15:27):
дим, а динамическую подгрузку скриптов через срц не пробовал? вместо текста если кормить ему путь до скрипты?
Isaev
(23.06.2010 в 01:30):
Просто и полезно!
Классная статья!
Классная статья!
Добавить комментарий
Заполните форму для добавления комментария