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

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

21.02.2016

969

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

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Отложенная загрузка изображений

Отложенная загрузка изображений

Если на странице есть несколько изображений или есть изображения дублирующиеся на всех страницах (header, footer), то чтобы ускорить общую загрузку сайта, можно установить для изображений отложенную загрузку. Изображение будет появляться Читать далее »

Загрузка контента без перезагрузки

Загрузка контента без перезагрузки

Подгрузка контента средствами Ajax Создаем тестовую верстку <p>Какую страницу желаете открыть?</p> <form> <input onclick="showContent('https://opttour.ru/main-rublik/sites/fotofit/')" type="button" value="Страница 1"> <input onclick="showContent('https://opttour.ru/main-rublik/sites/dtex/')" type="button" value="Страница 2"> </form> <div id="contentBody"></div> <div id="loading" style="display: none"> Идет Читать далее »

Технология Ajax

Технология Ajax

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

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

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

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