首页 > 解决方案 > 为什么 'google.script.run' 不能从 html body 'onload' 标签工作?

问题描述

我为 Google 表格(在表格的脚本编辑器中)编写了一个函数,其中用户选择一个单元格,从自定义菜单运行该函数,然后弹出一个 html 表单,其中包含所选单元格和相邻单元格中的文本表格。

这是“Code.gs”文件:

function reviewApplication() {
  var html = HtmlService.createHtmlOutputFromFile('Index').setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi().showModalDialog(html, 'Review PD Application');
}

function getTitleInfo() {
  return SpreadsheetApp.getActiveRange().getValue();
}

function getTeacherInfo() {
  var aRow = SpreadsheetApp.getActiveRange().getRow();
  return SpreadsheetApp.getActiveSheet().getRange(aRow, 5).getValue();
}

这是“Index.html”文件:

<!DOCTYPE html>
<html>
 <head>
  <script>
   function onTitle(title) {
     if (title == '') {return; }
     document.getElementById("title").innerHTML = title;
     google.script.run.withSuccessHandler(onTeacher).getTeacherInfo();
   }
      
   function onTeacher(name) {
     if (name == '') { return; }
     document.getElementById("teachername").innerHTML = name;
   }
   </script>
 </head>
 <body onload="google.script.run.withSuccessHandler(onTitle).getTitleInfo()">
  <form name="myform">
   Title: <a id="title"></a><br>
   Teacher: <a id="teachername"></a><br>
   Decision: 
    <select id="decisionlist" name="decision">
     <option value="blank"></option>
     <option value="Approved">Approved</option>
     <option value="Returned for Review">Returned for Review</option>
     <option value="Not Approved">Not Approved</option>
    </select><br>
   Comments:
    <textarea name="comments" rows="4" cols="50"></textarea><br>
    <input id="button" type="button" value="Submit" onclick="inputOkay(myform.elements['decision'].value, myform.elements['comments'].value)"/>
  </form>
 </body>
</html>

问题是当 UI 弹出表单时,表单的“title”和“teachername”元素是空白的,但它们应该填充电子表格该行上的文本。当我查看执行记录时,“reviewApplication”函数运行成功,但“getTitleInfo”函数失败,持续时间为 0 秒。你知道为什么它在这一点上失败了吗?

提交表单时还有其他脚本代码,但我现在将其排除在外,因为我已将问题缩小到 html 加载时。奇怪的是,直到上周末,这一切都很好。

这是一张显示“reviewPD”函数运行的图像,但随后“getTitleInfo”函数失败了。

执行日志截图

标签: javascripthtmlgoogle-apps-scriptgoogle-sheets

解决方案


我确实喜欢这个,它奏效了。

GS:

function reviewApplication() {
  var html = HtmlService.createHtmlOutputFromFile('ah3');
  SpreadsheetApp.getUi().showModalDialog(html,'Review PD Application');
}

function getTitleInfo() {
  return 'Teacher Title';
}

function getTeacherInfo() {
  
  return 'Hello World';
}

HTML:

<!DOCTYPE html>
<html>
 <head>
  <script>
   function onTitle(title) {
     if (title == '') {return; }
     document.getElementById("title").innerHTML = title;
     google.script.run.withSuccessHandler(onTeacher).getTeacherInfo();
   }
      
   function onTeacher(name) {
     if (name == '') { return; }
     document.getElementById("teachername").innerHTML = name;
   }
   </script>
 </head>
 <body onload="google.script.run.withSuccessHandler(onTitle).getTitleInfo()">
  <form name="myform">
   Title: <a id="title"></a><br>
   Teacher: <a id="teachername"></a><br>
   Decision: 
    <select id="decisionlist" name="decision">
     <option value="blank"></option>
     <option value="Approved">Approved</option>
     <option value="Returned for Review">Returned for Review</option>
     <option value="Not Approved">Not Approved</option>
    </select><br>
   Comments:
    <textarea name="comments" rows="4" cols="50"></textarea><br>
    <input id="button" type="button" value="Submit" onclick="inputOkay(myform.elements['decision'].value, myform.elements['comments'].value)"/>
  </form>
 </body>
</html>

您获取数据的方式一定有问题。

尝试自行测试 getTeacherInfo() 或 getTeacherInfo() 以确保其正常工作

在此处输入图像描述

**这个版本的数据收集实际上与你想要的非常相似,它完全可以工作,除了我没有尝试提交,因为我认为我没有支持它的代码。

代码:

function reviewApplication() {
  var html = HtmlService.createHtmlOutputFromFile('ah3');
  SpreadsheetApp.getUi().showModalDialog(html,'Review PD Application');
}

function getTeacherInfo() {
  const ss=SpreadsheetApp.getActive();
  const sh=ss.getActiveSheet();
  const row=sh.getActiveRange().getRow();
  return sh.getRange(row,5).getValue();
}

function getTitleInfo() {
  return SpreadsheetApp.getActiveRange().getValue();
}

HTML:

<!DOCTYPE html>
<html>
 <head>
  <script>
   function onTitle(title) {
     if (title == '') {return; }
     document.getElementById("title").innerHTML = title;
     google.script.run.withSuccessHandler(onTeacher).getTeacherInfo();
   }
      
   function onTeacher(name) {
     if (name == '') { return; }
     document.getElementById("teachername").innerHTML = name;
   }
   </script>
 </head>
 <body onload="google.script.run.withSuccessHandler(onTitle).getTitleInfo()">
  <form name="myform">
   Title: <a id="title"></a><br>
   Teacher: <a id="teachername"></a><br>
   Decision: 
    <select id="decisionlist" name="decision">
     <option value="blank"></option>
     <option value="Approved">Approved</option>
     <option value="Returned for Review">Returned for Review</option>
     <option value="Not Approved">Not Approved</option>
    </select><br>
   Comments:
    <textarea name="comments" rows="4" cols="50"></textarea><br>
    <input id="button" type="button" value="Submit" onclick="inputOkay(myform.elements['decision'].value, myform.elements['comments'].value)"/>
  </form>
 </body>
</html>

推荐阅读