如何在Google Apps Script项目中引用支持文件作为iframe源

完全可以将Apps Script项目内的文件作为iframe源引入到其他HTML中，这是GAS Web App中实现公共组件复用、避免重复编写代码的常用方案，可完美适配多页面统一左侧菜单的需求。

需求参考示意图：

左侧菜单在所有页面保持一致：

iframe实现具体步骤 #

• 步骤1：创建独立的菜单文件
  在项目中新建名为SidebarMenu.html的文件，写入菜单专属的HTML、CSS和交互逻辑，无需包含完整的页面全局结构。

• 步骤2：配置后端路由规则
  在Code.gs中修改doGet入口函数，通过查询参数区分返回内容，同时设置iframe嵌入权限：

  function doGet(e) {
    const reqPage = e.parameter.page;
    // 菜单请求单独返回菜单内容，允许跨域嵌入
    if(reqPage === 'common-menu') {
      return HtmlService.createHtmlOutputFromFile('SidebarMenu')
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
    }
    // 其他页面请求返回对应业务页面
    return HtmlService.createHtmlOutputFromFile('Index');
  }
  

• 步骤3：业务页面嵌入菜单iframe
  在所有需要加载公共菜单的业务页面中，添加iframe标签引入菜单，调整样式适配布局：

  <!-- 左侧公共菜单 -->
  <iframe src="https://script.google.com/macros/s/你的WebApp部署ID/exec?page=common-menu" 
    style="border: none;width: 240px;height: 100vh;float: left;" frameborder="0">
  </iframe>
  <!-- 右侧业务内容区域 -->
  <div style="margin-left: 250px;padding: 20px;">
    当前页面专属业务内容
  </div>
  

交互优化：菜单与主页面通信 #

如果需要点击菜单切换主页面内容、无需整页刷新，可通过postMessage实现父子页面通信：

1. 菜单页面的点击事件逻辑：

document.querySelectorAll('.menu-item').forEach(item => {
  item.addEventListener('click', () => {
    const targetPage = item.dataset.page;
    window.parent.postMessage({type: 'navigate', page: targetPage}, '*');
  })
})

2. 主页面监听消息处理逻辑：

window.addEventListener('message', (e) => {
  // 可自行添加来源校验，避免安全风险
  if(e.data.type === 'navigate') {
    // 执行切换页面内容的逻辑
    loadPageContent(e.data.page);
  }
})

更轻量的替代方案：模板嵌入 #

如果不需要隔离菜单的运行环境，无需用到iframe，直接通过模板引入的方式复用代码更简单：

1. 在Code.gs中添加公共引入函数：

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

2. 在所有业务页面的对应位置直接嵌入菜单代码：

<div class="sidebar">
  <?!= include('SidebarMenu'); ?>
</div>

该方案没有iframe的通信、样式兼容问题，更适合大多数普通业务场景。

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