Apps Script公共库内HTML调用google.script.run异常问题咨询

核心问题根源 #

google.script.run的执行上下文是当前宿主表格的容器绑定脚本，只能直接调用宿主脚本的全局函数，无法直接访问引入的第三方库的内部函数。从库中加载的HTML弹窗本质运行在宿主表格的前端环境，所以调用的服务端函数必须是宿主脚本存在的全局函数，这就是你之前报错找不到函数的原因。

你临时方案的两个问题原因：

1. 需要逐个定义空函数是因为没有做统一的调用路由，每新增一个库函数就要同步修改所有50+表格的本地脚本，维护成本极高
2. 5秒延迟是因为本地空函数没有显式指定返回值，Apps Script底层会做多余的上下文校验和返回值遍历，产生不必要的性能开销

最优解决方案：宿主侧仅保留1个通用代理函数 #

该方案无需为每个库函数单独修改本地脚本，后续新增库函数仅需修改公共库代码即可同步到所有表格，响应速度和本地运行无差异。

步骤1：修改公共库GS代码 #

新增通用调用入口，统一处理所有前端发起的函数调用请求：

// 新增通用调用入口，无需修改原有业务逻辑
function invokeLibraryFunction(funcName, ...args) {
  if (typeof this[funcName] !== 'function') {
    throw new Error(`库内无对应函数：${funcName}`);
  }
  return this[funcName](...args);
}

// 原有业务代码保留即可
function userOpened() {
    SpreadsheetApp.getUi()
      .createMenu('Expenses')
      .addItem('Expense Submission', 'expenseSubmittal_Local')
      .addToUi();
}

function expenseSubmittal_Library() {
  var html =  HtmlService.createHtmlOutputFromFile('libraryTest')
    .setWidth(400)
    .setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(html, 'Expense Submittal');
}

function returnData_Library(){
  return "my data";
}

步骤2：修改公共库内的HTML代码 #

所有google.script.run调用统一走代理，将需要执行的库函数名作为第一个参数传入：

<!DOCTYPE html>
<html>
<head>
    <base target="_top">
</head>
<body>
    <div id="output">initializing...</div>
    <script>
        google.script.run.withSuccessHandler(function (data) {
          var div = document.getElementById('output');
          div.innerHTML = data;
          // 第一个参数为库内要调用的函数名，后续可跟自定义入参
        }).invokeLibraryProxy('returnData_Library');
    </script>
</body>
</html>

步骤3：修改宿主表格的本地容器绑定代码 #

仅保留1个通用代理函数即可，不需要为其他业务函数单独定义：

function userOnOpen(event) {
  Library.userOpened();
}

function expenseSubmittal_Local(){
  Library.expenseSubmittal_Library.apply(this);
}

// 唯一的通用代理函数，所有库的前端调用都走该入口
function invokeLibraryProxy(funcName, ...args) {
  return Library.invokeLibraryFunction(funcName, ...args);
}

内容的提问来源于stack exchange，提问作者Alex Libengood