在加载html页面之前运行google脚本

Question

我正在创建基于Google脚本的仪表板，该仪表板从电子表格中提取数据。

但是我的页面在JavaScript运行之前就已加载。

这是我的代码：-

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

  });

因为我将进一步前进，并且必须从服务器端提取更多数据，并且我希望html在脚本完成后才仅加载“ view”

我有两个问题：1.在当前情况下，如何在脚本运行后使html打印。2.如何防止从服务器端一次又一次地加载数据数组。我只想运行一次并在不同的函数中使用数组数据。 “ .loadCdata();”

此图像显示仅打印了我的图表的一半

Answer 1

隐藏主div，然后在服务器端数据加载后显示它。

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

<script>
 google.script.run.withSuccessHandler(function() {
  document.getElementById("main").style.display = "block";
 }).loadData();
</script>

Answer 2

要在服务器脚本完成后显示HTML，请先隐藏HTML（例如display: none），然后使chartData()函数更改display属性，使其可见。（您可以使用Promise确保它以正确的顺序发生。）
使用Web Storage 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>

在加载html页面之前运行google脚本

问题描述投票：1回答：2

2个回答

最新问题

在加载html页面之前运行google脚本

问题描述 投票：1回答：2

2个回答

最新问题

问题描述投票：1回答：2