GoogleApps腳本（網路部署）自動重新加載頁面-有解無憂

我撰寫了兩個小型 Google Apps，部署為網路應用程式，用于“直播”我兒子的棒球比賽。一款應用程式（我稱之為“比賽日”）可以讓觀看比賽的人看到比分、局、球、好球和出局。第二個應用程式（我稱之為“Score Keeper”）可以讓某人更新這些統計資料。這兩個應用程式都訪問 Google 電子表格。

兩個應用程式在首次加載時都會顯示來自 Google 電子表格的正確統計資料，但僅在手動重新加載網頁時更新統計資料。我想每 X 秒自動重新加載“游戲日”，但是當我setTimeout("location.reload(true);", 10000);在我的 Javascript 檔案中使用類似的東西時，當頁面重新加載時，它是空白的。

我對“Score Keeper”應用程式有同樣的問題，因為在單擊按鈕后——例如，增加球的數量——除非我手動重新加載，否則網頁上沒有任何變化。該按鈕確實正確增加了電子表格中的球數。如果我然后手動重新加載，它會從電子表格中讀取統計資料，并再次顯示正確的統計資料。

我已經閱讀并嘗試實作google.script.run.withSuccessHandler()，但是 withSuccessHandler() 的作業方式目前超出了我的理解。如果這確實是這樣做的方法，我很樂意幫助我為我的特定案例實施它，因為我無法從其他人的例子中推斷出來。

這是我的代碼：

“游戲日”代碼.gs：

var id = 'Google Spreadsheet ID';
var ss = SpreadsheetApp.openById(id);
var sheet = ss.getSheetByName('score');
var statsRange = sheet.getRange(2,1,1,9);

function doGet(e) {
  var temp = HtmlService.createTemplateFromFile('index');
  temp.stats = getScore();
  return temp.evaluate();
}

function getScore() {
  var s = statsRange.getValues();
  return s[0];
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

“比賽日”index.html：

<div class="container">

  <div class="row">
    <div class="col s12 center-align">
      <h5><?= stats[0]   " (home) v. "   stats[1]   " (guest)"; ?></h5>
    </div>
  </div>
  
  <div class="row">
    <div class="col s4 center-align"><b>Home</b></div>
    <div class="col s4 center-align"><b>Inning</b></div>
    <div class="col s4 center-align"><b>Guest</b></div>
  </div>

  <div class="row">
    <div class="col s4 center-align stat"><?= stats[4] ?></div>
    <div class="col s2 right-align stat"><?= stats[2] ?></div>
    <div class="col s2 left-align stat"><?= stats[3] ?></div>
    <div class="col s4 center-align stat"><?= stats[5] ?></div>
  </div>

  <div class="row"></div>

  <div class="row">
    <div class="col s4 center-align"><b>Balls</b></div>
    <div class="col s4 center-align"><b>Strikes</b></div>
    <div class="col s4 center-align"><b>Outs</b></div>
  </div>

  <div class="row">
    <div class="col s4 center-align stat"><?= stats[6] ?></div>
    <div class="col s4 center-align stat"><?= stats[7] ?></div>
    <div class="col s4 center-align stat"><?= stats[8] ?></div>
  </div>

  <div class="row">
    <div class="col s12 center-align refresh">refresh page to update stats</div>
  </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!= include('index-js'); ?>

“游戲日”index-js.html：

<script>
  setTimeout("location.reload(true);", 10000);
</script>

I also just tried adding a Simple Trigger in the Google Apps Script editor to run on the doGet() function every minute. It executed the trigger every minute, but the page did not change.

uj5u.com熱心網友回復：

您可以使用google.script.run和html 資料屬性來實作您的目標：

代碼.gs

function getStats() {
  return new Array(15).fill("").map(Math.random)
}

function doGet(e) {
 return HtmlService.createTemplateFromFile('index').evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

索引.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top" />
    <style>
      .stats::after {
        content: attr(data-stats-value);
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col s12 center-align">
          <h5 id="header"></h5>
        </div>
      </div>

      <div class="row">
        <div class="col s4 center-align"><b>Home</b></div>
        <div class="col s4 center-align"><b>Inning</b></div>
        <div class="col s4 center-align"><b>Guest</b></div>
      </div>

      <div class="row">
        <div
          class="col s4 center-align stats"
          data-stats-index="4"
          data-stats-value=""
        ></div>
        <div
          class="col s2 right-align stats"
          data-stats-index="2"
          data-stats-value=""
        ></div>
        <div
          class="col s2 left-align stats"
          data-stats-index="3"
          data-stats-value=""
        ></div>
        <div
          class="col s4 center-align stats"
          data-stats-index="5"
          data-stats-value=""
        ></div>
      </div>

      <div class="row"></div>

      <div class="row">
        <div class="col s4 center-align"><b>Balls</b></div>
        <div class="col s4 center-align"><b>Strikes</b></div>
        <div class="col s4 center-align"><b>Outs</b></div>
      </div>

      <div class="row">
        <div
          class="col s4 center-align stats"
          data-stats-index="6"
          data-stats-value=""
        ></div>
        <div
          class="col s4 center-align stats"
          data-stats-index="7"
          data-stats-value=""
        ></div>
        <div
          class="col s4 center-align stats"
          data-stats-index="8"
          data-stats-value=""
        ></div>
      </div>

      <div class="row">
        <div class="col s12 center-align refresh">
          refresh page to update stats
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <?!= include('index-js'); ?>
  </body>
</html>

index-js.html

<script>
  const updateScore = (stats) => {
  document.querySelector('#header').textContent =
    stats[0]   ' (home) v. '   stats[1]   ' (guest)';
  document
    .querySelectorAll('.stats')
    .forEach(
      (el) => (el.dataset.statsValue = stats[Number(el.dataset.statsIndex)])
    );
};
setInterval(
  () => {google.script.run.withSuccessHandler(updateScore).getStats()},
  10000
);
</script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/327411.html

標籤：javascript html google-apps-script

上一篇：GoogleAppsScript-如何防止具有查看權限的人查看版本歷史記錄？

下一篇：如何根據另一個單元格的條件獲取單元格所有作業表的總數？