/ Scripts & jquery / Загрузка JavaScript динамически

Загрузка JavaScript динамически

HIT

21.02.2016

2243

Иногда требуется подгрузить скрипт на лету, в этом поможет технология 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> 

Обычный скрипт JavaScript динамически

Загрузка скрипта формируемого из PHP

[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Имитация Ajax загрузки контента

Имитация Ajax загрузки контента

Создадим эффект перехода внутри сайта имитирующий подгрузку контента ajax’ом, как будто без перезагрузки. Принцип эффекта: при переходе по ссылке плавно скрываем изменяемую часть контента, и при загрузке новой плавно ее Читать далее »

Технология Ajax

Технология Ajax

AJAX — это технология, позволяющая обмениваться данными между браузером и сервером без перезагрузок страницы, что бывает весьма удобно, иногда необходимо. Простой запрос и обновление контента Создаем файл time.php с содержимым Читать далее »

Подгрузка отдельных блоков на странице

Подгрузка отдельных блоков на странице

Прочитал в одной из статей — как подгружать методом ajax целые куски кода, в том числе и php. Сам метод действительно оказался прост. В данной статье опишем ситуации где этот Читать далее »

/

Добавить комментарий

Notice: Функция WP_Styles::add вызвана неправильно. Стиль с дескриптором "editor-buttons" был поставлен в очередь с незарегистрированными зависимостями: dashicons. Дополнительную информацию можно найти на странице «Отладка в WordPress». (Это сообщение было добавлено в версии 6.9.1.) in /home/t/tiberi6w/opttour.ru/public_html/wp-includes/functions.php on line 6170

Пока нет комментариев. Будь первым!

Загрузка JavaScript динамически
Закрытый раздел сайта
Рекомендации для васЗакрытый раздел сайтаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.