库中的 Google Script HTML 表单抛出错误 Uncaught

2023-12-28

我有一个 HTML 格式的库,如下所示:

code.gs:

function openDialog() {
  SpreadsheetApp.getUi().showModalDialog(HtmlService.createHtmlOutputFromFile("h"), "Test" );
}

function hello() {
  console.log('booo');
}

h.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
     <button id="b">Click me</button> 
    <script> 
    var b = document.getElementById('b');
    b.onclick = function() {
      google.script.run
      .withSuccessHandler(function(str){window.alert("executed");})
      // .withFailureHandler(function(error){window.alert("failed");})
      .hello();
    }
    </script>
  </body>
</html>

我共享此脚本以供查看并将其部署为库。接下来,我使用以下代码在 Google Sheet 中创建了一个绑定脚本:

function onOpen() {
  SpreadsheetApp.getUi().createMenu('test').addItem('run', 'myFunction').addToUi();
}

var hello = function() {};
function myFunction() {
  TT.openDialog();
}

我已经添加了带有标识符的库:TT。

接下来,我用绑定代码刷新了我的 Google Sheet 文件以查看菜单“test”,运行 test > run。 HTML 窗口出现了。当我点击按钮时,什么也没发生。当我打开控制台时,我看到了错误:

如果我不使用库,则不会出现此错误。


我和你经历过同样的情况。就我而言,问题的原因是图书馆方面的授权。

  • 当使用库中范围的授权过程未在库端完成时,我确认了以下错误Uncaught发生。
  • 当在库端完成使用库中范围的授权过程时,我确认了以下错误Uncaught没有发生。

也就是说,在我的环境中,我确认当该库用于您的情况时,需要为客户端和库端授权范围。

因此,作为解决方法,我使用了以下流程。

解决方法:

  1. Create a Google Apps Script library.
    • 请复制并粘贴您的脚本code.gs and h.html到独立脚本或容器绑定脚本。
  2. 将 Google Apps 脚本部署为库。
  3. 例如,在您的脚本中,请直接运行hello()在图书馆方面,并授权范围。
  4. 将库安装到客户端并从客户端加载库。
  5. 请跑myFunction()在客户端。

按照这个流程,当你运行时run在自定义菜单中单击 按钮,出现对话框executed被打开。

Note:

  • 在这种情况下,当我想让用户使用客户端脚本时,需要为客户端和库端授权范围。我想这可能有点不方便。
  • 那么,向 Google 问题跟踪器报告此问题怎么样?Ref https://developers.google.com/issue-tracker不幸的是,我找不到具有相同情况的问题跟踪器。

Added:

作为从客户端授权图书馆端范围的方法,我建议使用Web Apps。我以为使用Web Apps时,图书馆端的授权可以在客户端完成。这样一来,我想也许可以解决一些不便。

请执行以下流程。

1.图书馆一侧。

请复制并粘贴以下脚本。

谷歌应用脚​​本:code.gs

function openDialog() {
  SpreadsheetApp.getUi().showModalDialog(HtmlService.createHtmlOutputFromFile("h"), "Test" );
}

function hello() {
  console.log('booo');
}

function doGet() {
  return HtmlService.createHtmlOutput("ok");
}

HTML: h.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
     <button id="b">Click me</button> 
    <script> 
    var b = document.getElementById('b');
    b.onclick = function() {
      google.script.run
      .withSuccessHandler(function(str){window.alert("executed");})
      // .withFailureHandler(function(error){window.alert("failed");})
      .hello();
    }
    </script>
  </body>
</html>

2. 在图书馆端部署Web Apps。

请在图书馆端部署Web Apps。关于这个方法,可以看官方文档。Ref https://developers.google.com/apps-script/guides/web#deploy_a_script_as_a_web_app详细设置如下。

  • Execute as: User accessing the web app
  • Who has access: Anyone with Google account

3. 作为库部署。

请部署为库。Ref https://developers.google.com/apps-script/guides/libraries

4.客户端。

请将库安装到客户端。并且,请复制并粘贴以下脚本。在这种情况下,请更换https://script.google.com/macros/s/###/exec与您的 Web 应用程序 URL。

function onOpen() {
  SpreadsheetApp.getUi().createMenu('test').addItem('auth', 'auth').addItem('run', 'myFunction').addToUi();
}

var hello = function() {};
function myFunction() {
  TT.openDialog();
}

function auth() {
  const html = HtmlService.createHtmlOutput(`<input type="button" value="Authorize" onclick="window.open('https://script.google.com/macros/s/###/exec', '_blank');google.script.host.close()">`);
  SpreadsheetApp.getUi().showDialog(html);
}

5. 测试。

首先,请运行auth在自定义菜单中。这样就可以对客户端和库端的范围进行授权。当新标签页未打开时auth已运行,请运行auth()再次在脚本编辑器中。

下一步,请运行run。这样,您的对话框就打开了。并且,当两个授权(客户端和库端)都具有auth已经完成了,当你点击按钮时,对话框executed被打开。

参考:

  • Web Apps https://developers.google.com/apps-script/guides/web
  • 通过 Google Apps 脚本利用 Web Apps https://github.com/tanaikech/taking-advantage-of-Web-Apps-with-google-apps-script
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

库中的 Google Script HTML 表单抛出错误 Uncaught 的相关文章

随机推荐