Вопрос или проблема
Я использую HTMLService для создания независимого веб-приложения на Google Apps Script. Я хочу иметь возможность писать код, который будет обрабатывать нажатия на ссылки на HTML-странице приложения и переходить на страницы, указанные в этих ссылках. Почти как на обычной веб-странице, но это Google Web App. Обычная строка “>Нажми на меня” не работает.
Вот что я делаю:
Code.gs
/*
* Основная функция, настраивает пользовательский интерфейс веб-приложения.
*/
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function navigateTo(url) {
return HtmlService.createHtmlOutputFromFile(url)
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function handleNavigation() {
//Logger.log("Привет из handleNavigation, в Index.html");
google.script.run.navigateTo('EditUsers')
document.getElementById("test").innerHTML = "Успех!";
}
</script>
</head>
<body>
<h1>Главная</h1>
Это начало веб-приложения для статуса проекта<br/>
<a href="EditUsers.html">Редактировать пользователей</a><br/><button
onclick="handleNavigation()">Время кнопки!</button>
<a id="test" href="EditProjects.html">Редактировать проекты</a><br/>
<a href="ViewProjectStatuses.html">Просмотреть статусы проектов</a><br/>
</body>
</html>
Настройка системы навигации по страницам включает несколько частей. Если HTML в “странице” уже присутствует, тогда вы можете захотеть или не захотеть получать весь новый контент с сервера и снова внедрять контент. Если есть контент, который меняется, вы можете захотеть получить контент с сервера и внедрить новый контент. Если контент на странице не нужно обновлять, и контент уже присутствует, тогда все, что вам нужно сделать, это отобразить страницу и скрыть предыдущую страницу. Вам может потребоваться, чтобы код для навигации по страницам проверял все эти ситуации и действовал соответственно.
Вы можете получать один и тот же контент с сервера каждый раз, когда пользователь переходит на новую страницу, и в этом случае код будет намного проще. Поэтому не обязательно проверять наличие существующего контента каждый раз.
Если на “странице”, которую вы хотите показать, нет контента, вам потребуется withSuccessHandler(), чтобы получить новый HTML с сервера.
Сейчас у вас есть:
google.script.run.navigateTo('EditUsers')
Вам нужно:
google.script.run
.withSuccessHandler(injectNewHtml)
.navigateTo('EditUsers');
function injectNewHtml() {
//Код здесь для внедрения HTML в новую страницу
//Код для отображения страницы, на которую идет навигация
//Код для скрытия всех других страниц
};
Если вы хотите проверить наличие существующего контента, вы можете использовать что-то вроде этого:
var numberOfChildNodes = document
.getElementById(elementOfPage).childNodes.length;
if (numberOfChildNodes === 0) {
google.script.run
.withSuccessHandler(injectNewHtml)
.navigateTo('EditUsers');
};
Ответ или решение
Чтобы эффективно навигировать по HTML-страницам с помощью отдельного скрипта Google Apps, необходимо учитывать несколько ключевых моментов. Мы рассмотрим, как правильно организовать переходы между страницами, используя HTMLService и встроенные функции Google Apps Script.
Основные шаги для навигации по HTML-страницам в Google Apps Script
1. Создание начальной страницы
В вашем Code.gs необходимо установить начальную страницу приложения. Это можно сделать с использованием функции doGet(). Ваш код выглядит корректно, но необходимо скорректировать код функции navigateTo, чтобы он возвращал HTML-код страницы, а не просто файл.
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function navigateTo(page) {
return HtmlService.createHtmlOutputFromFile(page)
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}2. Создание HTML-страницы
Ваша HTML-страница должна содержать JavaScript, который будет обрабатывать навигацию. Рассмотрим, как вы можете использовать google.script.run для передачи запроса на сервер и обработки ответа.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function handleNavigation(page) {
google.script.run
.withSuccessHandler(injectNewHtml)
.navigateTo(page);
}
function injectNewHtml(html) {
document.getElementById('content').innerHTML = html;
}
</script>
</head>
<body>
<h1>Home</h1>
<div id="content">
<!-- Контент будет загружен сюда -->
This is the beginning of the Project Status Web App
</div>
<a href="#" onclick="handleNavigation('EditUsers.html')">Edit Users</a><br>
<a href="#" onclick="handleNavigation('EditProjects.html')">Edit Projects</a><br>
<a href="#" onclick="handleNavigation('ViewProjectStatuses.html')">View Project Statuses</a><br>
</body>
</html>3. Обработка навигации
Функция handleNavigation принимает имя страницы, которая будет загружена по клику на ссылку. Вызывается google.script.run.navigateTo(), чтобы получить соответствующий HTML-код. Затем полученный HTML вставляется в элемент с идентификатором content на странице.
4. Использование колбэков
Когда вы вызываете метод google.script.run, рекомендуется использовать withSuccessHandler для получения данных от сервера и управления отображением содержимого. Как показано выше, результат выполнения функции navigateTo попадает в функцию injectNewHtml, которая обновляет DOM.
Дополнительные рекомендации
-
Проверка контента: Если вы хотите проверять, есть ли уже загруженный контент, используйте простую проверку, как описано в ваш вопросе, чтобы избежать повторной загрузки одинакового содержимого.
-
Структура HTML: Подумайте о более структурированном подходе к организации вашего HTML-кода, возможно, с использованием
<div>для различных секций, что упростит управление контентом.
Заключение
Эти рекомендации и примеры кода помогут вам наладить навигацию по страницам в веб-приложении Google Apps Script. Основываясь на приведённых выше методах, вы сможете создать интуитивно понятный интерфейс для пользователей. Наличие хорошо организованного кода и четкой структуры HTML позволит вашему приложению работать эффективно и быстро, обеспечивая пользователям наилучший опыт работы с вашим веб-приложением.