Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.06.2019, 09:13
Кандидат Javascript-наук
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 145

Динамическая подгрузка HTML+javascript
Добрый день. Есть у меня сайт состоящий из несколько страниц, переключение которых осуществляется вкл/выкл отображения div, т.е при загрузке index.html загружаются все страницы.
Теперь же одна из страниц сильно разрослась, и я её хочу убрать, вынести в другой файл и соответственно вынести JS который обрабатывается на этой странице.
Сделал пока так:
HTMLElement.prototype.load = function (url,id) {
    // var el = this; // сслыка на DOM-объект
    var el=document.getElementById(id);
    var http = new XMLHttpRequest();
    http.open("GET", url);
    http.onreadystatechange = function () {
        if(http.readyState != 4 && http.status != 200) return; // можно ошибки обрабатывать
        el.innerHTML = http.responseText;
    }
    http.send(null);
}

Где Html сайт выглядит примерно так:
<script>
function test(){
	alert("13123");
}
</script>
<div class="steeldetail_block" id="sdb2">
<input type="button" value="Test" onclick="test();">
....
</div>


HTML загружаться нормально, а вот скрипт не работает =(
Видел решение проблемы вызов через eval функции, но это если js файл отдельно подгружается, а как быть если он вместе с HTML загрузился?

Отдельную страницу хочу сделать не зависимой, и внутри неё будет inline js, может быть CSS(собираеться через gulp), для того что бы было меньше запросов при погрузке страниц.
Ответить с цитированием
  #2 (permalink)  
Старый 27.06.2019, 16:48
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от pokk
Отдельную страницу хочу сделать не зависимой
Так может грузить ее в iframe?
Ответить с цитированием
  #3 (permalink)  
Старый 28.06.2019, 07:49
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Там, где у вас в 8-ой строке написано...
el.innerHTML = http.responseText;


Замените на...
el.innerHTML = http.responseText;

for(const oldScript of el.querySelectorAll("script")) {
	const script = document.createElement("script");
	script.textContent = oldScript.textContent;
	el.appendChild(script);
	script.remove();
}


А зачем вам добавлять метод load ко всем HTML-элементам? Может достаточно будет статичного метода?
Ответить с цитированием
  #4 (permalink)  
Старый 28.06.2019, 08:23
Кандидат Javascript-наук
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 145

Malleys, Круто, то что надо!!!!!!!

Только как это работает ? Считываем все скрипты, которые есть в ответном HTML создаем объект с ним и добавляем его в текший объект скрипта?
Ответить с цитированием
  #5 (permalink)  
Старый 28.06.2019, 14:28
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

если используется какой-нибудь сборщик типа webpack'а, можно сделать
https://webpack.js.org/guides/code-splitting/
https://webpack.js.org/guides/lazy-loading/

и еще какой-нибудь mvvm
https://github.com/jorgebucaran/hyperapp
https://reactjs.org

но это все долго если не в теме ) уже...
Ответить с цитированием
  #6 (permalink)  
Старый 28.06.2019, 21:25
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Дополню предыдущий ответ возможностью использования нативного dynamic import, который уже в stage 4
https://github.com/tc39/proposal-dynamic-import
Ответить с цитированием
  #7 (permalink)  
Старый 01.07.2019, 05:13
Кандидат Javascript-наук
Отправить личное сообщение для pokk Посмотреть профиль Найти все сообщения от pokk
 
Регистрация: 30.01.2014
Сообщений: 145

Цитата:
и еще какой-нибудь mvvm
https://github.com/jorgebucaran/hyperapp
https://reactjs.org
Глянул в эту сторону, есть пару вопросов.
1) Где происходит рендеринг? Так как я пишу web под встраиваемые системы(250кб всей памяти), то на сервере не могу выполнять рендеринг, а на клиенте пишут что это медленно работает =(.
2) Можно ли все компоненты собрать в кучу, т.е скомпилировать монолитный Html+js перед тем как залить его на сервер.

Мне нравиться идея, создание компонента HTML+JS, но останавливаю предыдущие вопросы =(
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно передать html в javascript? gsdev99 Элементы интерфейса 3 11.06.2019 18:14
Надо вписать код на JavaScript в HTML файл konkovaac Общие вопросы Javascript 4 02.10.2017 19:07
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Динамическая подгрузка javascript jetli13 AJAX и COMET 20 23.12.2009 16:05