【问题标题】：How to insert into .html file the template obtained from google app script HTMLService class?如何将从谷歌应用脚本 HTMLService 类获得的模板插入到 .html 文件中？
【发布时间】：2017-08-30 18:11:37
【问题描述】：

我有一个按钮，我想用谷歌应用脚本通过方法 HtmlService.createTemplateFromFile('HTML_file') 加载的其他 HTML 对象替换它。

按钮onclick函数用javascript写在.html文件中：

<div id="add_form_button_wraper">
  <input type="button" id="add_form" onclick="addForm()" value="Add Form">
 </div>
 <script>
   function addForm() {
     innerHTML = google.script.run.getForm(some_args);
     document.getElementById("add_form_button_wraper").innerHTML = 
     innerHTML;
  }
</script>

Code.gs 代码如下所示：

getForm(arg1, arg2) {
  // Creating HTML template from html file.
  var template = HtmlService.createTemplateFromFile(HTML_TEMPLATE);
  template.arg1 = arg1;
  template.arg2 = arg2;
  return template.evaluate().getContent();
}

单击按钮后，div 的内容变为未定义。我也尝试了 HTMLService.createTemplateFromFile().getCode() 具有相同的效果。

如何将app脚本HTMLService获取的原始html代码插入到div中？

【问题讨论】：

标签： javascript html google-apps-script

【解决方案1】：

一个简单的网络应用示例

以下是我的对话框和网络应用程序。我知道这不一定与您的特定情况有关，但希望一个可行的示例可以为您提供一些关于如何进行的想法。

这是一个标准网络应用程序表单的简单示例。您可以将其视为对话框或将其作为 web 应用程序运行。它将所有响应存储在一张纸上。

代码.gs：

function onOpen()
{
  SpreadsheetApp.getUi().createMenu('My Tools')
    .addItem('Display Dialog', 'displayDialog')
    .addToUi();
}

function doGet()
{
  var output=HtmlService.createHtmlOutputFromFile('CyclingSurvey');
  return output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Cycling Survey.gs:

function storeCyclingSurveyResults(rA) 
{
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('CyclingSurvey');
  var ts=Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "MM/dd/yyyy HH:mm:ss");
  rA.splice(0,0,ts);
  sh.appendRow(rA);
  return true;
}

function displayDialog()
{
  var html=HtmlService.createHtmlOutputFromFile('CyclingSurvey').setWidth(800).setHeight(500);
  SpreadsheetApp.getUi().showModelessDialog(html, 'Cycling Survey');
}

自行车调查.html：

<!DOCTYPE html>
<html>
<head>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    function recordData()
    {
      var q1=$('#q1').val();
      var q2=$('input[name="prefer"]:checked').val();
      var checked = [];
      $("input[name='own']:checked").each(function (){checked.push($(this).val());});
      var q3=checked.join(', ');
      var q4=$('#q4').val();
      var rA=[];
      rA.push(q1);
      rA.push(q2);
      rA.push(q3);
      rA.push(q4);
      google.script.run
        .withSuccessHandler(setResponse)
        .storeCyclingSurveyResults(rA);
    }
    function setResponse()
    {
      $('#reply').css('display','inline');
      $('#collect').css('display','none');
    }
    console.log('script here');
    </script>
    <style>
    #reply{display:none;}
    #collect{display:block;}
    </style>
</head>  
<body>
<div id="reply" >Thanks for taking the time to take our survey.  Your results have been recorded.</div>
<div id="collect">
<div style="font-weight:bold">What do you like about cycling?</div>
<textarea id="q1" rows="4" cols="50" placeholder="Enter Text Here..."></textarea>
<div style="font-weight:bold">Which type of bike do you prefer?</div>
<input type="radio" name="prefer" value="mountain bike">Mountain Bike<br />
<input type="radio" name="prefer" value="road bike" checked>Road Bike<br />
<input type="radio" name="prefer" value="fitness bike">Fitness Bike<br />
<div style="font-weight:bold">What types of bikes do you currently own?</div>
<input type="checkbox" name="own" value="Mountain Bike">Mountain Bike<br />
<input type="checkbox" name="own" value="Road Bike" checked>Road Bike<br />
<input type="checkbox" name="own" value="All Terrain Bike">All Terain Bike<br />
<input type="checkbox" name="own" value="Fitness Bike">Fitness Bike<br />
<div style="font-weight:bold">Do you prefer riding with others or alone?</div>
Alone<input id="q4" type="range" name="rating" max="10" min="0" step="1" defaultValue="5"/>Others<br />
<input type="button" id="btn1" value="Submit" onClick="recordData();" />
</div>
</body>
</html>

【讨论】：