javascript - 如何将从谷歌应用程序脚本 HTMLService 类获取的模板插入到 .html 文件中？

转载作者：行者123 更新时间：2023-12-03 03:33:47

25

4

我有一个按钮，我想将其替换为 Google 应用脚本通过方法 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() 具有相同的效果。

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

最佳答案

一个简单的 Web 应用程序示例

这是我如何制作对话框和网络应用程序。我知道它不一定适合您的特定情况，但希望一个有效的示例可以为您提供一些如何继续进行的想法。

这是标准 Web 应用程序表单的简单示例。您可以将其视为对话框或将其作为 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>

关于javascript - 如何将从谷歌应用程序脚本 HTMLService 类获取的模板插入到 .html 文件中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45967152/

25

4

0

文章推荐： javascript - 填充条形图中的顶部

文章推荐： flutter - Dart:检查对象是否实现接口(interface)

文章推荐： android - buildTypes Android Studio错误

sql - 哪个最快，1x 插入 512 行，4x 插入 128 行，或 512x 插入 1 行
我有 512 行要插入到数据库中。我想知道提交多个插入内容是否比提交一个大插入内容有任何优势。例如 1x 512 行插入 -- INSERT INTO mydb.mytable (id, phonen
sql:删除 + 插入 vs 更新 + 插入
已经提出了类似的问题，但由于它总是取决于，我单独询问我的具体情况。我有一个网站页面，显示来自数据库的一些数据，要从该数据库生成数据，我必须执行一些相当复杂的多连接查询。数据每天(每晚)更新一次。
python - pymongo 插入 vs pymysql 插入
我正在使用 MongoDb 和 MySQL 的 python 连接器 pymongo 和 pymysql 测试 MongoDb 和 MySQL，特别是插入功能。 pymongo版本是3.4，pymys
sql - 大型 SQL 插入 TVF 与 BULK 插入
从 C# 应用程序插入大型数组(10M 元素)的最快方法是什么？到目前为止，我使用的是批量插入。 C# 应用程序生成一个大文本文件，我使用 BULK INSERT 命令加载它。出于好奇，我编写了一个
java - 语法错误 : insert "enum Identifier", 插入 "EnumBody"，插入 "}"
我编写了一个枚举类型，当我为它运行我创建的 JUnit 测试时会出现以下语法错误: java.lang.Error: Unresolved compilation problems: Synt
C二叉搜索树实现——插入
我正在尝试创建一个程序，它将单词列表作为输入，并将它们排序为二叉树，以便能够找到它们，例如像字典。这是我到目前为止所做的，但是 newEl -> el = input; 出现段错误，我知道这是因为它试
latex - 缺少 $ 插入
你好我有编译这个问题 \begin{equation} J = \sum_{j=1}^{C} \end{equation} 我不断收到错误 missing $ inserted 这很奇怪，因
没有主键的 Linq 插入
我需要使用 LINQ to SQL 将记录插入到没有主键的表中。 table 设计得很差；我无法控制表结构。该表由几个 varchar 字段、一个文本字段和一个时间戳组成。它用作其他实体的审计跟踪。
插入 PdfCell 时图像会调整大小
我正在尝试使用 itextsharp 创建 Pdf。我添加了一张包含两列的表格，其中一列包含文本和其他图像。我想要恒定的图像大小如果另一个单元格中的文本增加并且其他单元格中的图像大小不同，我的图像会
php - 插入…………从中选择
我想把 calory 作为 fruits 的第一个值，我做不到，有人能帮忙吗？ $sql = 'INSERT INTO fruits VALUES('', ?, ?, ?)'
r - 插入/扩展季度到月度系列
我有一个包含季度观察结果的 data.frame。我现在想插入每月值(首选三次，线性很好)。中间目标应该是使用 DATE 创建一个 data.frame作为所有每月观察的索引和缺失值。谷歌搜索表明我
sql - 用数组“插入”
我想知道是否有办法在值列表中使用“插入”。我正在尝试这样做: insert into tblMyTable (Col1, Col2, Col3) values('value1', value
Javascript 插入 IFRAME
我想让人们能够在他们的网站中插入单个 Javascript 行，这实际上允许我插入包含我网站内容的固定大小的 IFRAME。它实际上是一个小部件，允许他们搜索我的网站或接收其他信息。这可能吗？最佳答
c# - 插入、选择和更新日期时间
我有一个包含时间的表，列名为 time，数据类型为 Date。在 asp.net 中，我想要一个查询插入日期，另一个查询则在 2 个日期之间进行选择。我已经尝试过这个: string data =
triggers - 触发编译错误(插入)
这是我的代码: create or replace trigger th after insert on stock for each row declare sqty number;
使用存储过程的具有唯一约束的 SQL 插入
这是一个带有具体示例的通用问题。我有一个包含三个字段(流派 ID (PK IDENTITY)、流派和子流派)的表。该表对(流派，子流派)组合具有唯一约束。我想知道如何修改存储过程以在表中不存在时插
Java:插入/替换到特定大小的排序数组
因此，我正在遍历二叉树，节点包含字符串，以及读取文件时该字符串是否出现多次。我只查找读取文件时出现次数最多的前 10 个单词，因此本质上我只是比较 int 值。我的问题是我正在尝试找出一种有效的方法
c++ - 插入 map
我有一张机票和行李 map ，每张门票必须是唯一的，并且必须与 map 上的位置相对应是否可以仅更改行李(m_bagage->秒)而不更改 key ？ std::unordered_map m_c
Java Jdbc 插入
我正在使用 jdbc 驱动程序做一个示例项目。我的问题是，如果我在 2 文本字段中输入空值。 null 不应该加载到数据库中吗？有没有办法避免在数据库中插入空字段？任何帮助将不胜感激。 //Execu
SSIS:插入/更新
我想知道 SSIS 中是否有特定的插入或更新选项。如果我想让程序检查它是更新还是插入，我是否必须做一些编码？或者是否可以启用一个选项，以便它会自行检查 PK 是否存在，然后更新，否则插入？亲切的问

首页

博学

6Ren·AI

商城

javascript - 如何将从谷歌应用程序脚本 HTMLService 类获取的模板插入到 .html 文件中？

一个简单的 Web 应用程序示例