Существуют различные способы реализации вашего требования ... Одна из "классических" архитектур - это иметь фиксированную страницу (index.html в вашем случае), которая запрашивает базу данных Firebase Realtime при ее открытии.
Один из способов передать значение узла базы данных, который вы хотите запросить, - использовать строку URL-запроса следующим образом: domain.com/1?id=456 (См. Как получить значения строки запроса в JavaScript? )
Следующий HTML-код поможет:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<script src="https://www.gstatic.com/firebasejs/5.9.3/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: 'xxxxxxx',
authDomain: 'xxxxxxx',
databaseURL: 'xxxxxxx',
projectId: 'xxxxxxx'
};
firebase.initializeApp(config);
var rootRef = firebase
.database()
.ref()
.child('data');
var urlParams = new URLSearchParams(window.location.search);
var dbNodeID = urlParams.get('id');
rootRef
.child(dbNodeID)
.once('value')
.then(function(snapshot) {
var dataItem1 = snapshot.val().dataItem1;
document.getElementById('content').innerHTML = dataItem1;
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
с моделью базы данных следующим образом:
DBRoot
- data
- 456
- dataItem1: "value-of-456"
- 789
- dataItem1: "value-of-789"
Это можно улучшить многими способами, ноэто слишком широк для одного ТАК вопрос и ответ!Просто пример: поскольку запрос к базе данных является асинхронным, для отображения значений на веб-странице может потребоваться время.По умолчанию вы можете отобразить счетчик и скрыть его, когда получите результат запроса (т. Е. В методе then()).Другим примером улучшения может быть использование библиотек или структур, таких как JQuery или, что лучше, Vue.js, Angular или React.