文章/答案/技术大牛

发布

社区首页 >问答首页 >Google Apps脚本(web deploy)自动重新加载页面

问Google Apps脚本(web deploy)自动重新加载页面
EN

Stack Overflow用户

提问于 2021-10-16 19:23:41

回答 1查看 153关注 0票数 0

我写了两个小的Google应用程序，部署为web应用程序，用来“直播”我儿子的棒球比赛。一款应用程序(我称之为“游戏日”)可以让观看比赛的人看到比分、局、球、好球和出局。第二个应用程序(我称它为"Score Keeper")可以让人更新这些统计数据。这两款应用都可以访问谷歌电子表格。

这两个应用程序在第一次加载时都会显示来自Google电子表格的正确统计数据，但只有在手动重新加载网页时才会更新统计数据。我想每X秒自动重新加载一次“游戏日”，但是当我在我的Javascript文件中使用类似setTimeout("location.reload(true);", 10000);的东西时，当页面重新加载时，它是空白的。

我的“记分器”应用程序也有同样的问题，在点击一个按钮后--例如，增加球的数量--网页上没有任何变化，除非我手动重新加载。该按钮确实正确地增加了电子表格中的球的数量。如果我随后手动重新加载，它将从电子表格中读取统计数据，并再次显示正确的统计数据。

我已经读到过并尝试实现google.script.run.withSuccessHandler()，但withSuccessHandler()的工作原理目前超出了我的理解。如果这确实是实现它的方法，我希望在我的特殊情况下帮助实现它，因为我无法从其他人的例子中推断出来。

下面是我的代码：

“游戏日”Code.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>

我还尝试在Google Apps脚本编辑器中添加一个简单的触发器，以便每分钟在doGet()函数上运行一次。它每分钟执行一次触发器，但页面没有更改。

javascript

html

google-apps-script

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-10-17 13:19:43

您可以使用google.script.run和html data attributes来实现您的目标：

code.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();
}

index.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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69598891

复制

相似问题

问Google Apps脚本(web deploy)自动重新加载页面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google Apps脚本(web deploy)自动重新加载页面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google Apps脚本(web deploy)自动重新加载页面
EN