Иногда требуется подгрузить скрипт на лету, в этом поможет технология Ajax.
Обычный скрипт JavaScript динамически
Создаем файл скрипта script-dinamic.js с содержимым
// случайное число от 1 до 100 var rnd = Math.floor(Math.random()*100+1); // выводим в контейнер content, добавляя уже к имеющемуся содержимому контейнера $("#content").html($("#content").html()+rnd+" ");
Создаем верстку
<form> <input type="button" value="Выполнить скрипт JavaScript" onclick="btnClick();"/> </form> <div id="content"> </div> <script> function btnClick() { $.getScript('script.js'); // вызываем скрипт } </script>
Загрузка скрипта формируемого из PHP
Тот же пример только script.js меняем на script.php
<form> <input type="button" value="Выполнить скрипт JavaScript" onclick="btnClick();"/> </form> <div id="content"> </div> <script> function btnClick() { $.getScript('script.php'); // вызываем скрипт } </script>
Содержимое script.php
<?php // заголовок, который обозначает, что PHP будет генерировать // JavaScript-файл в кодировке UTF-8. header('Content-Type: text/javascript; charset=UTF-8'); // генерируем случайное число от 1 до 100 $rnd = rand(1,100); // выдаем код скрипта в поток вывода echo '$("#content").html($("#content").html()+'.$rnd.'+" ");'; ?>
Примеры
<form> <input type="button" value="Выполнить скрипт JavaScript" onclick="btnClick();"/> </form>
<div id="content-dinamic"> </div>
<script>function btnClick() {
$.getScript('/wp-content/themes/tester/script-dinamic.js'); // вызываем скрипт
}</script>