Можно вставить в HTML элемент из XML? - JavaScript, Ajax

druidvic · 14.02.2024, 19:58

Здравствуйте Уважаемые!

Подскажите хоть один работающий пример вставки элемента из xml в html.

Например есть файлы
html

Код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>planets</title>
	
<!--<script>
*** document.location="planets1.xml"
</script>-->
	<script>
/*		document.write('planets1.xml');*/
	</script>	
<link href="planets1.css" rel="stylesheet" type="text/css">
</head>

<body>
<div>
  <table width="100%">
    <th> Планета</th>
      <th> Масса</th>
      <th> Период обращения(дней)</th>
      <th> Радиус</th>
      <th> Плотность (земля=1)</th>
      <th> Расстояние в перигелии млн. км.</th>	
  </table>

<!--	<script>
		const main=document.querySelector('.main')
		const h1=document.createElement('h1');
		h1.textContent='Hello';
		main.append(h1);
</script>-->
	</div>
</body>
</html>

и xml

Код:

<?xml version="1.0" encoding="utf-8"?>
<!--File name planets1.xml-->
<!--Подключаем CSS-->
<!--<?xml-stylesheet type="text/css" href="planets.css"?>-->
<planets>
	<planet>
		<name>Меркурий</name>
		<mass>Масса (Земля=1).0553</mass>
		<day>Период обращения (дней)58.65</day>
		<radius>Радиус km2440</radius>
		<density>Плотность (Земля=1).983</density>
		<distance>Расстояние в перигелии млн. км.69.8</distance>
	</planet>
	<planet>
		<name>Венера</name>
		<mass>"Масса (Земля=1)".815</mass>
		<day>"Период обращения (дней)"116.75</day>
		<radius>"Радиус km"5980</radius>
		<density>"Плотность (Земля=1)".943</density>
		<distance>"Расстояние в перигелии млн. км."10.75</distance>
	</planet>
	<planet>
		<name>Земля</name>
		<mass>"Масса (Земля=1)"1</mass>
		<day>"Период обращения (дней)"1</day>
		<radius>"Радиус km"3390</radius>
		<density>"Плотность (Земля=1)"1</density>
		<distance>"Расстояние в перигелии млн. км."206.63</distance>
	</planet>
</planets>

Как заполнить таблицу данными?

Arigato · 15.02.2024, 09:23

Ну если целиком, то можно через iframe.

p51x · 15.02.2024, 09:49

Зачем iframe? Очевидно xml-парсер и генерация таблицы.

Arigato · 15.02.2024, 13:53

Или простая замена тегов в XML на HTML-теги. Набросал пример:

Код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>planets</title>
	
<script>
function main(){
	fetch("planets1.xml").then((response) => {
		if (response.ok) {
			response.text().then((text) => {
				let planets = text.match(/<planets>(.*?)<\/planets>/s);
				if (planets) {
					let html = planets[1].replace(/<planet>(.*?)<\/planet>/gs, (match, p1) => {
						p1 = p1.replace(/<(\/{0,1})(.*?)>/gs, "<$1td>");
						return `<tr>${p1}</tr>`;
					});
					document.getElementById("result").innerHTML += html;
				}
			});
		}
	});
}
addEventListener("DOMContentLoaded", main);
</script>
<link href="planets1.css" rel="stylesheet" type="text/css">
</head>

<body>
<div>
	<table width="100%" id="result" border="1">
		<thead>
			<tr>  
				<th> Планета</th>
				<th> Масса</th>
				<th> Период обращения(дней)</th>
				<th> Радиус</th>
				<th> Плотность (земля=1)</th>
				<th> Расстояние в перигелии млн. км.</th>	
			</tr>
		</thead>
	</table>
</div>
</body>
</html>

Файл planets1.xml должен лежать в той же папке. Запускать через сервер.

planets.png

druidvic · 15.02.2024, 21:33

Спасибо. Работает.
Я имел ввиду несколько другое:
найти в файле xml нужный элемент, например, в planets.xml <name>Меркурий</name> (один элемент) связать его с тегом в html.

Код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>

<body>
	<p id="1">name</p>
	<p id="2">name</p>
</body>
</html>

id1=Меркурий
id2=Венера
Т.е. чтобы вместо name отображался связанный элемент - Меркурий, Венера и т.д. Меняешь в xml - меняется в html.

Что похожее как здесь установка связи XML-документа с HTML-страницей, а также сцепление элементов HTML с XML-элементами

Цитата:

Сообщение от Arigato

Ну если целиком, то можно через iframe.

Пусть через iframe, или каким другим способом, но только не целиком.

Такое вообще возможно?

Arigato · 16.02.2024, 00:41

По ссылке там инфа для браузера Internet Explorer.

Можно по аналогии с примером выше, но не все данные выводить, а брать конкретные нужные теги. Пример:

Код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>planets</title>
	
<script>
function main(){
	// открываем xml
	fetch("planets1.xml").then((response) => {
		if (response.ok) {
			response.text().then((text) => {
				// находим корневой тег <planets>
				let planets = text.match(/<planets>(.*?)<\/planets>/s);
				if (planets) {
					let html = "";
					// перебираем все планеты (теги <planet>)
					planets = planets[1].match(/<planet>(.*?)<\/planet>/gs);
					planets.forEach((planet) => {
						// получаем значение тега <name> для конкретной планеты
						let name = planet.match(/<name>(.*?)<\/name>/s);
						name = name ? name[1] : "";
						html += `<p>${name}</p>`;
					});
					// выводим сформированный html
					document.getElementById("result").innerHTML = html;
				}
			});
		}
	});
}
addEventListener("DOMContentLoaded", main);
</script>
<link href="planets1.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div id="result"></div>
</body>
</html>

Arigato · 16.02.2024, 01:02

Ну и в качестве альтернативы можно сделать так:

Код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>planets</title>
	
<script>
function main(){
	// открываем xml
	let xhr = new XMLHttpRequest();
	xhr.open("GET", "planets1.xml");
	xhr.responseType = 'document';
	xhr.onload = () => {
		let html = "";
		let xml = xhr.response;
		// перебираем все теги <name>
		let names = xml.querySelectorAll("name");
		names.forEach((name) => {
			html += `<p>${name.innerHTML}</p>`;
		});
		// выводим сформированный html
		document.getElementById("result").innerHTML = html;
	};
	xhr.send();
}
addEventListener("DOMContentLoaded", main);
</script>
</head>

<body>
	<div id="result"></div>
</body>
</html>

ADSoft · 16.02.2024, 08:09

но при изменении в реальном времени xml конечно ничего меняться не будет .... нужно или по таймеру постоянно обновлять страницу.... либо понимать что не все можно с помощью только html, xml, js сделать

druidvic · 16.02.2024, 11:35

Цитата:

Сообщение от ADSoft

но при изменении в реальном времени xml конечно ничего меняться не будет ...

Это и не требуется. Я для себя, чтобы не лазить в закладки, сделал страничку со ссылками на сайты. Иногда надо "подсмотреть" данные авторизации. Вот и хочу выводить подсказку, но данные брать из xml.

Цитата:

Сообщение от Arigato

Ну и в качестве альтернативы можно сделать так:

Спасибо! Но это все варианты через сервер. Без него

Цитата:

"planets4.html:10 Fetch API cannot load file:///D:/Projects/HelpRuProject/XML/planets/planets1.xml. URL scheme must be "http" or "https" for CORS request."

мешает политика безопасности браузера.
Я же хочу "скрестить" через DOM такие коды:

Код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>planets3</title>
<link href="popup.style.css" rel="stylesheet">
	<style>
		.btn{width: 64px;}
	</style>
	
</head>

<body>
<div class="wrap">
	<div class="flex">
	<button type="button" class="btn" data-modal="modal_1">Меркурий</button>
	<button type="button" class="btn" data-modal="modal_2">Венера</button>
	<button type="button" class="btn" data-modal="modal_3">Земля</button>
	</div>
	<div class="overlay" data-close=""></div>

	<div id="modal_1" class="dlg-modal dlg-modal-fade"> <span class="closer" data-close=""></span>
	<h3>Меркурий<br>
	  Масса (Земля=1) .0553<br>
	  Период обращения (дней)58.65<br>
	  Радиус km2440<br>
	  Плотность (Земля=1).983<br>
	  Расстояние в перигелии млн. км.69.8
	  </h3>
    </div>
	<div id="modal_2" class="dlg-modal dlg-modal-fade">
		<span class="closer" data-close=""></span>
	<h3>Венера<br>
	  Масса (Земля=1) .815<br>
	  Период обращения (дней) 116.75<br>
	  Радиус km 5980<br>
	  Плотность (Земля=1).943<br>
	  Расстояние в перигелии млн. км."10.75
	  </h3>
	</div>
	<div id="modal_3" class="dlg-modal dlg-modal-fade">
		<span class="closer" data-close=""></span>
	<h3>Земля<br>
	  Масса (Земля=1) 1<br>
	  Период обращения (дней) 1<br>
	  Радиус km 3390<br>
	  Плотность (Земля=1) 1<br>
	  Расстояние в перигелии млн. км. 206.63
	  </h3>
	</div>	
</div>
<script src="popup.function.js"></script>
<div>
	<iframe src="planets1.xml" xslt="xmlstylesheet.xsl" height="200px" width="100%" style="border-color: aqua"></iframe>
</div>

	
</body>
</html>

Код:

<?xml version="1.0" encoding="utf-8"?>
<!--File name planets1.xml-->
<!--Подключаем CSS-->
<?xml-stylesheet type="text/css" href="planets.css"?>
<planets>
	<planet>
		<name>Меркурий</name>
		<mass>Масса (Земля=1).0553</mass>
		<day>Период обращения (дней)58.65</day>
		<radius>Радиус km2440</radius>
		<density>Плотность (Земля=1).983</density>
		<distance>Расстояние в перигелии млн. км.69.8</distance>
	</planet>
	<planet>
		<name>Венера</name>
		<mass>"Масса (Земля=1)".815</mass>
		<day>"Период обращения (дней)"116.75</day>
		<radius>"Радиус km"5980</radius>
		<density>"Плотность (Земля=1)".943</density>
		<distance>"Расстояние в перигелии млн. км."10.75</distance>
	</planet>
	<planet>
		<name>Земля</name>
		<mass>"Масса (Земля=1)"1</mass>
		<day>"Период обращения (дней)"1</day>
		<radius>"Радиус km"3390</radius>
		<density>"Плотность (Земля=1)"1</density>
		<distance>"Расстояние в перигелии млн. км."206.63</distance>
	</planet>
</planets>

Код:

;(function() {

	// коллекция всех элементов на странице, которые могут открывать всплывающие окна
	// их отличительной особенность является наличие атрибута '[data-modal]'
	const mOpen = document.querySelectorAll('[data-modal]');
	// если нет элементов управления всплывающими окнами, прекращаем работу скрипта
	if (mOpen.length == 0) return;

		  // подложка под всплывающее окно
	const overlay = document.querySelector('.overlay'),
		  // коллекция всплывающих окон
		  modals = document.querySelectorAll('.dlg-modal'),
		  // коллекция всех элементов на странице, которые могут
		  // закрывать всплывающие окна
		  // их отличительной особенность является наличие атрибута '[data-close]'
		  mClose = document.querySelectorAll('[data-close]');
	// флаг всплывающего окна: false - окно закрыто, true - открыто
	let	mStatus = false;

	for (let el of mOpen) {
		el.addEventListener('click', function(e) {
			// используюя атрибут [data-modal], определяем ID всплывающего окна,
			// которое требуется открыть
			// по значению ID получаем ссылку на элемент с таким идентификатором
			let modalId = el.dataset.modal,
				modal = document.getElementById(modalId);
			// вызываем функцию открытия всплывающего окна, аргументом
			// является объект всплывающего окна
			modalShow(modal);
		});
	}

	// регистрируются обработчики событий на элементах, закрывающих
	// всплывающие окна
	for (let el of mClose) {
		el.addEventListener('click', modalClose);
	}

	// регистрируются обработчик события нажатия на клавишу
	document.addEventListener('keydown', modalClose);

	function modalShow(modal) {
		// показываем подложку всплывающего окна
		overlay.classList.remove('fadeOut');
		overlay.classList.add('fadeIn');

		// определяем тип анимации появления всплывающего окна
			modal.classList.remove('fadeOut');
			modal.classList.add('fadeIn');

		// выставляем флаг, обозначающий, что всплывающее окно открыто
		mStatus = true;
	}

	function modalClose(event) {
		if (mStatus && ( event.type != 'keydown' || event.keyCode === 27 ) ) {
			// обходим по очереди каждый элемент коллекции modals (каждое всплывающее окно)
			// и в зависимости от типа анимации, используемой на данной странице,
			// удаляем класс анимации открытия окна и добавляем класс анимации закрытия
			for (let modal of modals) {
					modal.classList.remove('fadeIn');
			}

			// закрываем overlay
			overlay.classList.remove('fadeIn');
			overlay.classList.add('fadeOut');
			// сбрасываем флаг, устанавливая его значение в 'false'
			// это значение указывает нам, что на странице нет открытых
			// всплывающих окон
			mStatus = false;
		}
	}
})();

https://programmersforum.ru/attachme...1&d=1708069750

planets1.7z

Снимок экрана 2024-02-16 104754.jpg

Один скрипт открывает/закрывает модальное окно, второй отображает xml.
Хочется загрузить xml, "перекроить" его и отобразить нужное во фрейме.
Если посмотреть в Инспекторе FireFox то #document виден, со всеми элементами. Т.е. в DOMе элементы присутствуют. Вопрос как до них добраться?
Похожее решение нашел JS. Подделываем сайт, с помощью TamperMonkey
А вот применить - знаний не хватает. Слишком сложно для меня.

Arigato · 16.02.2024, 13:45

Цитата:

Сообщение от druidvic

мешает политика безопасности браузера.

Ну естественно никто не даст вам открыть произвольный файл на вашем компьютере. Потому и запускается через сервер. А что мешает держать запущенным Apache?

15.02.2024, 09:23	#2
Arigato Высокая репутация СуперМодератор Регистрация: 27.07.2008 Сообщений: 15,551	Ну если целиком, то можно через iframe. E-Mail: arigato.freelance@gmail.com

16.02.2024, 08:09	#8
ADSoft Старожил Регистрация: 25.02.2007 Сообщений: 4,160	но при изменении в реальном времени xml конечно ничего меняться не будет .... нужно или по таймеру постоянно обновлять страницу.... либо понимать что не все можно с помощью только html, xml, js сделать Сайты, приложения, автоматизация в широком смысле слова

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Вставить новый элемент после всех элементов	schibeki	Общие вопросы по Java, Java SE, Kotlin	1	19.05.2015 20:39
Вставить элемент в список / C#	msfriday	Помощь студентам	0	12.02.2014 18:44
Вставить элемент в вектор, сортированный по убыванию	Kat9	Паскаль, Turbo Pascal, PascalABC.NET	0	23.05.2013 11:08
C# одномерный массив, удалить-вставить элемент	IIIAPCEP	Помощь студентам	1	22.04.2012 23:39
Си++. Вставить в массив элемент в нужную строку	hen	Помощь студентам	10	08.06.2009 22:27

15.02.2024, 09:49	#3
p51x Старожил Регистрация: 15.02.2010 Сообщений: 15,709	Зачем iframe? Очевидно xml-парсер и генерация таблицы.