如何根据showModalDialog创建的HTML页面标题加载对应函数？

我正在创建一个Google Apps Script网页，模态框标题会根据用户点击的按钮变化。页面加载时，希望根据传入的pageTitle执行两个函数中的一个，但当前代码无法正常工作。

页面显示函数 #

function showPoPage(poPage, pageTitle) {
  const template = HtmlService.createTemplateFromFile(poPage);
  const html = template.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  html.setWidth(1400).setHeight(800)
  SpreadsheetApp.getUi().showModalDialog(html, pageTitle);
}

无法正常运行的脚本片段 #

...(嵌入HTML中)
<script>
const pageTitle = document.getElementByClassName('modal-dialog-title-text').innerText;
console.log('Page Title found on top: ' + pageTitle)// 日志无输出
if (pageTitle == 'Edit PO') {
  loadPODataToEdit();
} else if (pageTitle === 'Fabric-Colombia PO') {
  loadOrderPosFromSS();
  loadUnit();
}
</script>

控制台报错 #

Uncaught TypeError: document.getElementByClassName is not a function

问题原因与解决方案 #

1. 拼写错误 #

原代码中的document.getElementByClassName是拼写错误，正确方法名为**document.getElementsByClassName**（注意复数Elements）。但即使修正这个错误，也无法拿到模态框标题，因为存在核心逻辑问题。

2. 核心问题：模态框标题不在你的HTML DOM中 #

showModalDialog的第二个参数是Google UI组件的标题，该元素属于Google的外部界面容器，并不在你编写的HTML文档DOM树内，因此无法通过document对象访问。

3. 正确实现方式：通过模板传递pageTitle #

直接在渲染HTML模板时，将pageTitle变量传递给前端，无需从DOM中抓取：

步骤1：修改后端函数，传递变量给模板

function showPoPage(poPage, pageTitle) {
  const template = HtmlService.createTemplateFromFile(poPage);
  // 将pageTitle作为模板变量传入
  template.pageTitle = pageTitle;
  const html = template.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  html.setWidth(1400).setHeight(800)
  SpreadsheetApp.getUi().showModalDialog(html, pageTitle);
}

步骤2：前端脚本直接使用模板变量

<script>
// 直接从模板注入pageTitle值
const pageTitle = "<?= pageTitle ?>";
console.log('Page Title: ' + pageTitle);
if (pageTitle == 'Edit PO') {
  loadPODataToEdit();
} else if (pageTitle === 'Fabric-Colombia PO') {
  loadOrderPosFromSS();
  loadUnit();
}
</script>

脚本运行规则说明 #

在Google Apps Script的HTML服务中：

• 嵌入的脚本仅能访问你编写的HTML元素，无法访问Google提供的模态框容器（包括标题栏）。
• 模板引擎是后端向前端传递动态数据的标准方式，比抓取外部UI元素更可靠。

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