fetch() загрузка и скрытое событие
 

Имеется такой вопрос: на HTML странице есть элемент div в который загружается с помощью fetch() некий *.html файл с сервера, в котором имеются свои javascript функции по, например, блокировке/показу элементов этого *.html файла. У меня визуальное содержимое этого div меняется в соответствии с *.html файлом, НО почему-то javascript функции не работают, а браузер отладчик не видит ни скрипт, ни новую разметку внутри этого div.

vaisan, вместо долгих описаний лучше всего подходит простенький тестовый пример... ;)

Ещё не понял как присоединить файлы html
Поэтому zip

Запуск index.html с сервера/localhost
Интересующий скрипт находится в divContent.html

Просто вставляешь их содержимое как текст в сообщение... Потом "обрамляешь" БиБи-кодами
[ HTML ]...[ / HTML ]
Пробелы оставлены для показа...

Я не знаком с bootstrap... Т.ч. для меня это не может быть тестовым примером, извини. :(

Придется тебе ждать другого человека или делать пример именно с fetch(), чего я собственно и ждал...

vaisan, это собственно твое встраивание html "со скриптами"?

vaisan,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

vaisan, весь твой пример можно свести к этому

<div id='test'></div>
<script type='text/javascript'>
var txt='<script>alert("Ok")<\/script>';
txt+='<p>Test<\/p>';
document.getElementById('test').innerHTML = txt;
</script>

Так действительно скрипты не отработают... :no:

Нужно создавать элемент script... Добавлять его соответствующим методом на страницу...
Тогда скрипты будут работать.

var o=document.createElement('script');
o.text = 'alert("Ok");';
document.getElementsByTagName('head')[0].appendChild(o);

ksa, рони,

подскажите, пожалуйста, а чем плох тег object?
Почему бы не сделать так:

function XHR(filename) {
	var url = filename;
	document.getElementById("divSource").setAttribute("data", filename);
	/*fetch(url).then(function (response) {//response.json()
		response.text().then(function (text) {
			document.getElementById("divSource").innerHTML = text;
		});
	});*/
};

<object id="divSource" style="margin: 20px 20px 10px 20px; height: 480px; width: 75%; overflow-y: auto;" type="text/html"></object>
<!--div id="divSource" style="margin: 20px 20px 10px 20px; height: 480px; width: 75%; overflow-y: auto;"></div-->

vaisan,
попробуйте так, если есть возможность заменить div на object

Либо я, либо Вы не поняли. простой клик типа: onclick="javascript: alert('OK');" срабатывает, но если вызовете функцию onclick="javascript:myFynk();" описанную на подгружаемой странице , она не работает

Manyasha, не следует использовать этот элемент не по назначению. Используйте вместо этого <iframe>.

vaisan, hyvää päivää!. Вам следует вставить элемент на страницу и выполнить скрипты

function XHR(filename) {
	fetch(filename).then(function (response) {
		return response.text();
	}).then(function(code) {
		var document = new DOMParser().parseFromString(code, "text/html");
		return document.documentElement;
	}).then(function(documentElement) {
		var ds = document.getElementById("divSource");
		ds.textContent = "";
		ds.appendChild(documentElement);
		Array.from(documentElement.querySelectorAll("script"))
			.forEach(function(script) {
				setTimeout(eval, 0, script.textContent);
			});
	});
};

vaisan, подход, который вы используете, имеет кучу проблем — если вы захотите завести состояние, то оно будет стираться из скрипта при каждой новой загрузке файла, и пр.

Вам следует пересмотреть подход — например, с сервера загружать чистые данные (к примеру, массив с данными) и отрисовывать их на клиенте. Тогда у вас скрипт, который управляет приложением будет загружаться только один раз, и вы сможете иметь состояние приложения.

Moi, professori Malleys
Paljon kiitoksia!!!
Невероятно, но Ваш код сработал.
Правильно ли я понимаю, что нужен двойной проход по загружаемому файлу:
1. загрузка только html элементов
и затем
2. загрузка всех скриптовых
и если нужны css, то
3. загрузка стилевых элементов

Меня только немного смутила в Вашем коде чистка ds.textContent = "";
Разве при этом не удалится содержимое innerHtml/

vaisan, функция, которую я вам писал, загружает HTML-документ и помещает её на страницу (вместе со всеми картинками, скриптами, стилями и пр.). Всё применяется кроме скриптов, которые объявлены <script>-ом.

Поэтому после того, как документ помещён на страницу, там нужно найти все скрипты и выполнить их. (В примере сделано при помощи eval)

Стили применяются так и так!

Если такое не сделать, то новое содержимое добавится к тому, что уже есть в элементе divSource.

Да! Старое удаляется, новое добавляется.

Olen iloinen voidessani auttaa sinua! Itse asiassa puhun viroa, mutta tämä suomi on erittäin ymmärrettävä. Terveisiä Virosta!

Теги они не плохие и не хорошие... У них есть синтаксис и некое описание из букваря про их назначение и поведение на странице...

Оказалось что срабатывает не

documentElement.children[0].style.backgroundColor = "#FFFFCC";//или
documentElement.firstChild.style.backgroundColor = "#FFFFCC"; //children[0] = head

,
а этот код

documentElement.children[1].style.backgroundColor = "#FFFFCC";  // children[1] = body