Запустите скрипты Google до html загрузки страницы - PullRequest
Новая
       0

Запустите скрипты Google до html загрузки страницы

1 голос
/ 11 февраля 2020

Я создаю панель мониторинга, основанную на сценариях Google, которая извлекает данные из электронной таблицы.

Но моя страница загружается до запуска JavaScript.

Вот мой код: - 

document.addEventListener('DOMContentLoaded', function() {
    google.script.run.withSuccessHandler(chartData).loadCdata();
    google.script.run.withSuccessHandler(otherChart).loadCdata();

  });

Так как я буду продвигаться дальше, нужно будет получить намного больше данных со стороны сервера, и я хочу, чтобы html загружал «view» только после того, как мои сценарии завершены sh

У меня есть два вопроса: 1. В текущем сценарии, как я могу заставить html печатать после запуска моего скрипта. 2. Как я могу предотвратить загрузку массива данных снова и снова со стороны сервера. Я просто хочу запустить его один раз и использовать массив данных в разных функциях. ".loadCdata();"

на этом изображении напечатана только половина моего графика only half chart is printing

Ответы [ 2 ]

3 голосов
/ 11 февраля 2020

Скрыть основной div и затем отобразить его после загрузки данных на стороне сервера. 

<div id="main" style="display:none">
.... content
</div>

<script>
 google.script.run.withSuccessHandler(function() {
  document.getElementById("main").style.display = "block";
 }).loadData();
</script>
1 голос
/ 11 февраля 2020

  1. Чтобы отобразить HTML после завершения серверного скрипта, начните с того, что скрыли HTML (например, display: none), а затем с помощью функции chartData() измените атрибут отображения, чтобы он стал видимый. (Вы можете использовать Promise , чтобы убедиться, что это происходит в правильной последовательности.)

  2. Используйте API веб-хранилища для сохранения массива данные в хранилище браузера. 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div id="chart1" style="display:none">
      <!-- Chart 1 -->
    </div>
    <div id="chart2" style="display:none">
      <!-- Chart 2 -->
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function() {
        google.script.run.withSuccessHandler(populateCharts).loadCdata();
      });

      /**
       * Populate the charts, make them visible, and save data to sessionStorage for later usage.
       */
      function populateCharts(data) {
        return new Promise((resolve, reject) => {
          // Populate charts

          resolve();
        }).then(() => {
          // Make the charts visible
          document.getElementById("chart1").style.display = "block";
          document.getElementById("chart2").style.display = "block";

          // Save chart data to session storage
          sessionStorage.setItem("chartData", JSON.stringify(data));
        });
      }
    </script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...