Google Apps Script：如何将loggiedinuser函数结果输出至loggedinuser Div标签

嘿Jack，作为JavaScript新手遇到这个问题很正常，我来一步步帮你搞定！结合你提到的Google Apps Script（HtmlService）场景，有两种常用的方式可以把loggedinuser函数的结果放到id="loggedinuser"的Div里：

方法1：服务器端模板渲染（页面加载时直接显示） #

这种方式适合页面加载后就需要立刻展示用户信息的场景，直接在HTML模板里调用你的函数：

步骤1：确保Google Apps Script代码正确 #

首先在.gs文件里，doGet方法要记得调用evaluate()来处理模板：

function loggedinuser() {
  // 这里是你的获取登录用户逻辑，示例返回用户邮箱
  return Session.getActiveUser().getEmail();
}

function doGet() {
  return HtmlService.createTemplateFromFile('你的HTML文件名').evaluate();
}

步骤2：在HTML中直接插入结果 #

在你的HTML文件里，找到id="loggedinuser"的Div，用模板语法插入函数结果：

<!-- 直接显示纯文本结果 -->
<div id="loggedinuser"><?= loggedinuser() ?></div>

<!-- 如果返回的是对象，先转成JSON再处理 -->
<div id="loggedinuser"></div>
<script>
  // 把服务器端返回的对象转成客户端可识别的JSON
  const userInfo = <?= JSON.stringify(loggedinuser()) ?>;
  // 按需展示内容，比如组合成欢迎语
  document.getElementById('loggedinuser').textContent = `欢迎回来，${userInfo}`;
</script>

方法2：客户端异步调用（适合动态更新场景） #

如果需要在页面加载后某个时机再获取用户信息，或者要处理错误情况，可以用google.script.run异步调用服务器函数：

步骤1：GS代码保持不变 #

和方法1的GS代码一致，确保loggedinuser函数能正常返回用户信息。

步骤2：在HTML中添加客户端脚本 #

<div id="loggedinuser"></div>

<script>
  // 调用服务器端的loggedinuser函数
  google.script.run
    .withSuccessHandler(userData => {
      // 成功获取信息后更新Div内容
      document.getElementById('loggedinuser').textContent = `当前登录用户：${userData}`;
    })
    .withFailureHandler(error => {
      // 处理获取失败的情况
      document.getElementById('loggedinuser').textContent = '获取用户信息失败';
      console.error('错误详情：', error);
    })
    .loggedinuser();
</script>

关键注意点 #

• 如果loggedinuser返回的是对象类型（比如包含用户名、邮箱的复杂对象），一定要用JSON.stringify()转成JSON字符串，否则客户端会显示[object Object]。
• 确保你的HTML文件名和createTemplateFromFile()里的参数完全一致，并且该文件已在脚本项目中创建。

这样就能顺利把登录用户信息显示到指定的Div里啦！

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