如何在Google Apps Script侧边栏HTML的内部JS中获取传递的参数

问题核心是：模板渲染时的argument变量仅在服务器端生成HTML时有效，前端浏览器运行的secondaryJS函数处于独立作用域，直接调用argument会因变量未定义失败。下面提供三种可行的解决方式：

方法一：将参数注入为前端全局变量 #

直接在模板渲染时把参数赋值给前端全局变量，事件函数即可直接访问：

修改Index.html的<script>部分：

<script>
  // 用JSON.stringify处理特殊字符，确保JS语法合法
  const initialArgument = <?!= JSON.stringify(argument) ?>;
  
  window.addEventListener('click', secondaryJS); 
  function secondaryJS(event){                 
    console.log('look event', event);
    document.getElementById("mytest2").innerHTML = 'This is replacing ok';
    // 使用全局变量处理参数
    let processedResult = initialArgument + 'some more';
    document.getElementById("mytest3").innerHTML = processedResult;
  }
</script>

方法二：将参数存储到DOM元素的data属性 #

把参数隐藏在DOM元素的自定义data属性中，事件触发时从DOM读取：

1. 在HTML的<body>中添加一个隐藏元素存储参数：

<p id="argumentStore" style="display: none;" data-argument="<?!= argument ?>"></p>

2. 修改事件函数读取参数：

<script>
  window.addEventListener('click', secondaryJS); 
  function secondaryJS(event){                 
    console.log('look event', event);
    document.getElementById("mytest2").innerHTML = 'This is replacing ok';
    // 从DOM元素的data属性获取参数
    const initialArgument = document.getElementById('argumentStore').dataset.argument;
    let processedResult = initialArgument + 'some more';
    document.getElementById("mytest3").innerHTML = processedResult;
  }
</script>

方法三：利用闭包在事件绑定阶段传递参数 #

通过闭包把参数直接传递给事件处理函数，避免全局变量污染：

<script>
  // 渲染时通过闭包将参数传入事件回调
  window.addEventListener('click', function(event) {
    const initialArgument = <?!= JSON.stringify(argument) ?>;
    secondaryJS(event, initialArgument);
  }); 
  
  function secondaryJS(event, argument){                 
    console.log('look event', event);
    document.getElementById("mytest2").innerHTML = 'This is replacing ok';
    let processedResult = argument + 'some more';
    document.getElementById("mytest3").innerHTML = processedResult;
  }
</script>

三种方法各有优势：全局变量实现最简单；data属性适合参数需要和DOM元素关联的场景；闭包方式更符合模块化编程习惯。

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