刷新 Google Script HTML Service 中的 div 或整个页面

Question

我在刷新 Google Apps 脚本中的 HTML 页面或 div 内容时遇到了困难。我是自学编程的，所以我对整个过程知之甚少；请耐心等待我乱七八糟的代码。

基本上，我有一个应用程序，一旦用户单击按钮，它就会更改 Google Docs 中的信息并刷新应用程序以显示更改。我需要刷新部分的帮助。

这里是html服务部分的sn-p：

<?!= include('Stylesheet'); ?>
<? var data = getData(); ?>
<? var data2 = get2Data(); ?>
...
<div class="inline mainbody">
    <div class="title">
    </div>
    <div class="section group">
        <div class="col span_1_of_2">
            <div class="newreq">
                <table>
                    <h2>New Requests</h2>
                    <? for (var i = 0; i < data.length; i++) { ?>
                    <? for (var j = 0; j < data[i].length; j++) { ?>
                        <? if ((data[i][23] == 'None') && (data[i][29] != "Done") && (data[i][30] != "Yes") && (data[i][31] != "Yes")) { ?>
                        <tr>
                            <td>
                                <b>Name:</b> <?= data[i][3] ?>&nbsp;&nbsp;&nbsp;<b>School:</b> <?= data[i][5] ?>&nbsp;&nbsp;&nbsp;<b>Program Type:</b> <?= data[i][1] ?><?= data[i][2] ?>
                                <br>
                                <p><b>First Choice at:</b> <?= data[i][19] ?>&nbsp;&nbsp;&nbsp;<input onclick="google.script.run.finalTime('<?= data[i][24] ?>','First')" type="button" value="Finalize First Choice">
                                </p>
                                <p><b>Second Choice at:</b> <?= data[i][20] ?>&nbsp;&nbsp;&nbsp;<input onclick="google.script.run.finalTime('<?= data[i][24] ?>','Second')" type="button" value="Finalize Second Choice">
                                </p>
                                <p><b>Third Choice at:</b> <?= data[i][21] ?>&nbsp;&nbsp;&nbsp;<input onclick="google.script.run.finalTime('<?= data[i][24] ?>','Third')" type="button" value="Finalize Third Choice">
                                </p>
                                <p><input onclick="google.script.run.deletePre('<?= data[i][24] ?>')" type="button" value="Delete" class="button">
                                </p>
                                <br>
                            </td>
                        <? break ?>
                        <? } ?>
                        </tr>
                    <? } ?>
                    <? } ?>
                </table>
            </div>
        </div>

基本上，脚本从电子表格中提取信息。一旦我单击一个按钮，它是否可以刷新脚本甚至页面，以便用户不必手动？我尝试在没有有意义的结果的情况下搜索类似的查询，并且添加“.reload()”和“.html(data)”的尝试效果不佳。有什么想法可以解决这个问题吗？

Answer 1

旧线程，但也许这会对某人有所帮助...如何重建和显示整个页面...

index.html 的一部分

    <div id="refresh" onclick ="google.script.run
        .withSuccessHandler(refreshApp)
        .getNewHtml()">
    Refresh
    </div>

    <script>
      function refreshApp(newHtml) {
        document.open();
        document.write(newHtml);
        document.close();
      }
    </script>

部分代码.gs

    function getNewHtml(e) {
      var html = HtmlService
        .createTemplateFromFile('index') // uses templated html
        .evaluate()
        .getContent();
      return html;
    }

Answer 2

您可以使用 window.location.href 来刷新加载 HTML 应用程序的浏览器选项卡。

window.myFunctionToRefresh = function() {
  window.location.href = "https://script.google.com/macros/s/YourAppsScriptID_Here/exec";
  return false;
};

我用这个，它有效，. . . 但在某些条件下页面会刷新，但 Apps 脚本不会完全重新加载。我仍然不确定为什么会这样。所以，我不能完全解释或认可它。

您可以使用 DOM 方法和属性将新的 HTML 注入您的网页，而无需重新加载页面。

document.getElementById('element_ID_Here').innerHTML = "<div>Hello World</div>";

jQuery 有它自己的方法：

$("#element_ID_Here").html("Hello World");

您已经知道如何使用google.script.run，因此您可以调用服务器，以字符串形式获取一些 HTML 内容，将其返回，然后使用withSuccessHandler(functionToRunOnSuccess) 注入新的 HTML。

假设您想替换“主体”中的所有内容：

<div class="inline mainbody">

给那个 DIV 一个 id：

<div id='idMainBody' class="inline mainbody">

从服务器获取内容 HTML 内容作为字符串，当.gs 代码返回某些内容时，withSuccessHandler 运行，然后将其注入该 DIV。如果你的withSuccessHandler 被命名为onGotHtml：

function onGotHtml(argMyNewHTML) {
  document.getElementById('idMainBody').innerHTML = argMyNewHTML;
};