тривиальный вопрос: html + js
Здравствуйте.
не работаю с js, поэтому прошу помощи. у меня есть кластер с серверами приложений, каждый из которых умеет отдавать диагностическую информацию о себе через встренную jsp. я пытаюсь собрать простую агреггированную страницу со всеми диаг-страницами всех серверов кластера. для этого нарисовал простенькую страницу, которая через iframe опрашивает каждый сервер. однако, захотелось усложнить страницу, и сделать не просто колонку со всей инфой из результата страницы диагностики, а вырезать оттуда что-то через split + substr. пожалуйста помогите с накидыванием "скелета". как работать с сабстром и сплитом мне понятно, а вот как вызвать функцию из html и вставить ее результат в отдельную колонку - мне не очень фантазии хватает. <html class="DiagPage">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body >
<script type = "text/javascript">
function getSubColumn(columnIndex){
var subColumn = document.getElementById('sp').innerHTML.split(';')[columnIndex];
return subColumn;
}
</script>
Тест
<table style="text-align: left; width: 1100px;" border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc" leftmargin="50" topmargin="0">
<tbody>
<tr align="center">
<td nowrap height=18 width=100>Имя схемы</td>
<td>Диагностическая информация</td>
</tr>
<tr>
<td nowrap height=18 width=100 align="center" >aaa</td>
<td>
<iframe id = "sp" frameborder = "false" src="https://myserver:8443/diag" height=18 width=1750/>
</td>
</tr>
<tr>
<td nowrap height=18 width=100 align="center" >bbb</td>
<td>
<iframe id = "sp" frameborder = "false" src="https://myserver:8445/diag" height=18 width=1750/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
upd#1 по ссылкам https://myserver:8445/diag возвращается простой html, тело которого выглядит как текстовая строка типа: status: valid; run: 13.01.2022 12:00:00; ... |
wolfio,
на всякий случай https://learn.javascript.ru/fetch |
Всё не так просто, друже.)
Обращение по разным портам даже одного домена считается разными origin, а обращение к разным origin из javascript запрещено в целях безопасности. Разрешить это можно на каждом сервер добавив header Access-Control-Allow-Origin, однако с доступом к содержимому iframe это не поможет всё равно. Можно и это решить, нагородив общение с iframe посредством postMessage, что потребует доработки с обоих сторон, либо воспользовавшись, как предложили выше, fetch и работая сразу со строками без фреймов. Я для похожих задач давным давно не имея доступа к серверам просто использовал пользовательский скрипт через temprmonkey который для каждого домена проводил заранее нужные манипуляции, а верхняя страничка просто подключала их во фрейме как обычно.) |
вы можете показать как в ячейку таблицы вставить результат респонса из фетча?
я подзастрял в экспериментах. с селекторами в js все как-то путано. функцию прямо из ячейки колонки вызывать можно? |
<table id="table" ... fetch('https://myserver:8443/diag')
.then(body => body.text())
.then(text => text.split(';'))
.then(array => table.rows[0].cells[0].innerHTML = array.join('<br>'));
|
Пардон, но кажется я недопонимаю вашего ответа.
Результат так должен выглядеть? <html class="DiagPage">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body >
<script type = "text/javascript">
function getSSData(URL){
return fetch(URL).then(body => body.text()).then(text => text.split(';')).then(array => table.rows[0].cells[0].innerHTML = array.join('<br>'));
}
</script>
Тест
<table style="text-align: left; width: 1100px;" border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc" leftmargin="50" topmargin="0">
<tbody>
<tr align="center">
<td nowrap height=18 width=100>Имя схемы</td>
<td>Диагностическая информация</td>
</tr>
<tr>
<td nowrap height=18 width=100 align="center" >aaa</td>
<td>
<iframe id = "sp" frameborder = "false" src="https://myserver:8443/diag" height=18 width=1750/>
</td>
</tr>
<tr>
<td nowrap height=18 width=100 align="center" >bbb</td>
<td>
getSSData('https://myserver:8443/diag');
</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Нет, скрипт отдельно, разметка отдельно.
Но если так уж хочется, то условно так: <html class="DiagPage">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
Тест
<table style="text-align: left; width: 1100px;" border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc" leftmargin="50" topmargin="0">
<tbody>
<tr align="center">
<td nowrap height=18 width=100>Имя схемы</td>
<td>Диагностическая информация</td>
</tr>
<tr>
<td nowrap height=18 width=100 align="center" >aaa</td>
<td data-href="https://myserver:8443/diag"> </td>
</tr>
<tr>
<td nowrap height=18 width=100 align="center" >bbb</td>
<td data-href="https://myserver:8444/diag"> </td>
</tr>
</tbody>
</table>
<script type = "text/javascript">
function getText(url) {
return fetch(url).then(body => body.text())
}
document.querySelectorAll('td[data-href]').forEach(td => {
getText(td.getAttribute('data-href')).then(text => {
const html = text.split(';').join('<br>');
td.innerHTML = html;
});
})
</script>
</body>
</html>
|
ошибка если как есть.
мне кажется мы ушли в космос) а нельзя вернуться к iframe и сабстром вытащить инфу из его значения просто? если честно, я не вижу разницы между iframe и fetch, разве что новые более неизвестные ошибки появились :) |
ошибка осталась.
мне кажется мы ушли в космос) а нельзя вернуться к iframe и сабстром вытащить инфу из его значения просто? если честно, я не вижу разницы между iframe и fetch, разве что новые более неизвестные ошибки появились :) |
Нельзя ничего из iframe вытащить, если он загружен с другого домена (не с того, с которого сама страница пришла)
|
| Часовой пояс GMT +3, время: 22:18. |