如何从谷歌脚本的不同功能加载多个 HTML答案

【问题标题】：How to load multiple HTML from different functions of google script如何从谷歌脚本的不同功能加载多个 HTML
【发布时间】：2020-09-05 13:52:18
【问题描述】：

我有一个场景，我从 doGet 函数加载“第一个”html，然后在该 html 中调用 google 脚本函数，在其中获取一些地理代码，然后从该函数中我想加载具有某些值的不同 html 文件。我尝试了一些东西，但这对我没有用。我的谷歌脚本如下所示，

function doGet(e) {
  Logger.log(e)
  var htmlTemplate = HtmlService.createTemplateFromFile('first');
  var htmlOutput = htmlTemplate.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
  Logger.log('htmlOutput loaded')
  return htmlOutput;
}
function extractGeoCodes(excelRows){
    var latlng_arr = []
    for (var i = 0; i < excelRows.length; i++) {
    var add = excelRows[i]['Address']
    var geocoder = Maps.newGeocoder().geocode(add);
    latlng_arr.push(geocoder.results[0].geometry.location)
    Utilities.sleep(200);
    }
    var htmlTemplate = HtmlService.createTemplateFromFile('second');
    htmlTemplate.latlng_arr = latlng_arr;
    var htmlOutput = htmlTemplate.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
    Logger.log('second htmlOutput loaded')
    return htmlOutput;
}

我的“第一个”html 如下所示，

<!DOCTYPE html>
<html>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
    ></script>
<script>
    function Upload() {
        //This function uploads xlsx file and pass content to ProcessExcel
    };
    function ProcessExcel(data) {
        var workbook = XLSX.read(data, {
            type: 'binary'
        });
        var firstSheet = workbook.SheetNames[0];
        var excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);
        var latlng_data = google.script.run.extractGeoCodes(excelRows) //this calls google script function
    };
</script>
<body>

<p>Click on the "Choose File" button to upload a file:</p>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" onclick="Upload()" />
<hr />
<div id="dvExcel"></div>


</body>
</html>

“第二个”html 是，

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script type="text/javascript">
      var name = '<?= latlng_arr ?>';
    </script>
  </head>
  <body onload=>
    <h1>Hello World, from Google cloud</h1>
    <div>
      <label>Value from latlong array = </label>
      <span><?= latlng_arr ?></span>
      <!-- we use the value from the variable which was set in the template in google script -->
    </div>
  </body>
</html>

我可以看到日志“第二个 htmlOutput 已加载”，但 html 没有加载它，它停留在“第一个”。我该如何应对这种情况？

【问题讨论】：

你的html？
@TheMaster 两个 html 文件都添加有问题。
使用查询字符串参数告诉doGet()返回哪个页面

标签： html google-apps-script

【解决方案1】：

您可以使用.withSuccessHandler() 附加到页面的一部分或使用document.write() 清除整个文档。由于您要将 html 添加为字符串，因此您应该在 HtmlOutput 上使用 .getContent：

返回字符串：

function extractGeoCodes(excelRows){
/*...*/
return htmlOutput.getContent();
}

Html('second') 已剥离：

    <script type="text/javascript">
      var name = '<?= latlng_arr ?>';
    </script>
    <h1>Hello World, from Google cloud</h1>
    <div>
      <label>Value from latlong array = </label>
      <span><?= latlng_arr ?></span>
      <!-- we use the value from the variable which was set in the template in google script -->
    </div>

第一个 html 处理字符串 html：

function addHtml(html){
  document.querySelector("body").insertAdjacentHTML('beforeend',html)
}
google.script.run.withSuccessHandler(addHtml).extractGeoCodes(excelRows) //this calls google script function

【讨论】：