Динамическая подгрузка 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), для того что бы было меньше запросов при погрузке страниц.

Так может грузить ее в iframe?

Там, где у вас в 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-элементам? Может достаточно будет статичного метода?

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

Только как это работает ? Считываем все скрипты, которые есть в ответном HTML создаем объект с ним и добавляем его в текший объект скрипта?

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

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

но это все долго если не в теме ) уже...

Дополню предыдущий ответ возможностью использования нативного dynamic import, который уже в stage 4
https://github.com/tc39/proposal-dynamic-import

Глянул в эту сторону, есть пару вопросов.
1) Где происходит рендеринг? Так как я пишу web под встраиваемые системы(250кб всей памяти), то на сервере не могу выполнять рендеринг, а на клиенте пишут что это медленно работает =(.
2) Можно ли все компоненты собрать в кучу, т.е скомпилировать монолитный Html+js перед тем как залить его на сервер.

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