Если я правильно читаю ваш вопрос, все необходимые данные изначально являются частью страницы (поскольку вы не можете загрузить ее с сервера, она имеет чтобы все уже были там - но смотрите под строкой ниже для получения дополнительной информации об этом).Но вы сказали:
Невозможно предварительно загрузить все содержимое страницы, а затем использовать javascript для скрытия / отображения содержимого файла, когда пользователь изменяет выбор, потому что один HTML-файл будетбыть слишком большим и слишком медленным для загрузки.
Таким образом, предполагается, что сами данные немного меньше представления данных.
Вы, безусловно, можете иметь элемент встраница (например, div), которую вы обновляете с помощью рендеринга подмножества данных, содержащихся на странице, используя DOM .Вот тривиальный пример:
const data = [
{label: "one", a: "a one", b: "b one", c: "c one"},
{label: "two", a: "a two", b: "b two", c: "c two"},
{label: "three", a: "a three", b: "b three", c: "c three"},
{label: "four", a: "a four", b: "b four", c: "c four"}
];
function populateMenu() {
const menu = document.getElementById("menu");
for (let i = 0; i < data.length; ++i) {
const entry = data[i];
const a = document.createElement("a");
a.href = `#entry-${i}`;
a.textContent = entry.label;
a.addEventListener("click", event => {
event.preventDefault();
showEntry(entry);
});
menu.appendChild(a)
}
}
function showEntry(entry) {
const content = document.getElementById("content");
const {a, b, c} = entry;
content.textContent = `a: ${a}, b: ${b}, c: ${c}`;
}
populateMenu();
#menu a {
padding: 4px;
}
<div id="menu"></div>
<div id="content"></div>
Использует синтаксис ES2015 +, но вы можете сделать то же самое с ES5, только если вам это необходимо для вашей целевой среды.
content div, конечно, может составлять большую часть отображения страницы.
Это базовый характер одностраничного приложения (SPA), поэтому дальнейшие исследованияиспользование этого термина может быть полезным.Но ваш SPA является автономным (тогда как большинство будет выполнять серверные вызовы, но все равно обновит страницу, как указано выше).
В комментарии вы сказали:
В настоящее времяфайлы создаются с самого начала, есть основная папка и файл, который представляет обработку каждой папки.Пользователь мог обработать 1000 папок, что означает, что основной файл - это, по сути, список из 1000 папок, а затем есть 1000 других файлов, каждый из которых содержит несколько страниц данных.Ясно, что если объединить все это в один файл, это будет примерно в 1000 раз больше, но пользователь будет только просматривать процессы, связанные с одной папкой ... Так что мой подход выше не будет работать для меня.
Боюсь, вы пытаетесь съесть свой торт и съесть его.:-) Либо вы можете загрузить данные позже, либо это все на странице в самом начале.В ответе на вопрос вы не можете загрузить данные позже, поэтому они должны быть на странице в самом начале.
Но : использование вами слова "файлы" выше предполагает, чтоэтот отчет без сервера может содержать набор файлов, а не только один файл.
Кросс-браузерными опциями, если HTML-файл A должен загружать контент из HTML-файла B, являются:
- Используйте
iframe s и обновите src для перехода от файла к файлу.Вы сказали в вопросе, что они «не для основного содержания страницы», но это не мое понимание;и что они уродливы, но они полностью , стилизованные через CSSОни могут быть буквально интегрированы в главную страницу. - Продолжайте использовать фреймы, обновите
src фрейма для перехода от файла к файлу.Да, frames были удалены в HTML5.Они никогда не будут удалены из веб-браузеров, слишком много устаревших.
К сожалению, вы не можете надежно использовать XMLHttpRequest, когда ваша страница загружена с file: URL.Некоторые браузеры позволяют это, другие нет.(Вы не можете использовать fetch ни в одном из них, в частности, он не поддерживает схему file:.)
Боюсь, ваши ограничения буквально ограничивают ваш выбор.
Вот пример iframe:
report.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Report</title>
<style>
#menu a {
padding: 4px;
}
#content {
border: none;
}
</style>
</head>
<body>
<div id="menu">
<a href="#file-1" data-file="file1.html">File 1</a>
<a href="#file-2" data-file="file2.html">File 2</a>
<a href="#file-3" data-file="file3.html">File 3</a>
</div>
<iframe id="content" src="file1.html"></iframe>
<script>
document.getElementById("menu").addEventListener("click", event => {
event.preventDefault();
const a = event.target.closest("a");
document.getElementById("content").src = a.getAttribute("data-file");
});
</script>
</body>
</html>
file1.html (file2.html и file3.html идентичны, только разные имена и номера):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>File 1</title>
</head>
<body>
This is file 1.
</body>
</html>