Google AppScript中HTML弹窗onclick点击事件不触发如何解决

问题根因 #

• 你在前端HTML的JavaScript代码中直接调用了Browser.msgBox()，这是Google Apps Script服务端专属API，无法在对话框的iframe前端环境运行，调用直接报错导致函数中断
• CheckExecute函数末尾存在多余的半角单引号，语法错误也会导致函数无法执行
• 没有声明onApiLoad函数，加载api.js时会直接抛错，阻塞页面其他JS执行
• 你原有的.gs文件中showPicker函数逻辑正常，无需调整

修正方案 #

直接替换你的Dialog.html为以下代码即可：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
  <script>
    // 补全onApiLoad函数避免加载api.js时报错，后续用到Picker API再补充内部逻辑
    function onApiLoad() {
      pickerApiLoaded = true;
    }
  </script>
  <script src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  <script>
    var DEVELOPER_KEY = '....';
    var DIALOG_DIMENSIONS = {width: 600, height: 425};
    var pickerApiLoaded = false;

    function CheckExecute() {
      // 前端弹提示用原生alert，不要用服务端的Browser.msgBox
      alert("Hello World!");
      document.getElementById('folderselected').innerHTML = '<b>Folder Id is:</b>';
    }

    // 如果需要点击按钮后执行服务端脚本操作（修改表格、调用Google服务等），用以下写法替换上面的CheckExecute即可
    // function CheckExecute() {
    //   google.script.run
    //     .withSuccessHandler(() => {
    //       document.getElementById('folderselected').innerHTML = '<b>Folder Id is:</b>';
    //       alert('服务端函数执行完成');
    //     })
    //     .withFailureHandler(err => alert('执行出错：' + err))
    //     .你的服务端函数名(需要传递的参数);
    // }
  </script>
</head>
<body>
  <div>
    <p id='result'></p>
    <p id='folderselected'>This is check area again</p>
    <button onclick="CheckExecute()">Click me</button>
    <p id='folderselected1'>This is check area 2</p>
  </div>
</body>
</html>

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