如何在Google Apps Script中实现主页内嵌Iframe独立页面？

实现步骤 #

完全满足你分文件隔离内容的需求，具体操作如下：

1. 创建两个独立HTML文件
   在Google Apps Script项目中，点击左侧「+」号，分别创建：

   • Index.html：作为主页容器
   • EmbeddedContent.html：存放你那部分包含大量特殊符号的庞大内容（直接写原内容即可，无需转义任何符号）

2. 编写服务器端逻辑（Code.gs）
   在Code.gs中编写doGet函数，根据请求参数返回对应页面，同时设置允许iframe嵌入的权限：

   function doGet(e) {
     // 根据URL参数判断返回主页还是嵌入页
     if (e.parameter.action === 'embedded') {
       return HtmlService.createHtmlOutputFromFile('EmbeddedContent.html')
         .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); // 必须设置，允许iframe加载
     } else {
       return HtmlService.createHtmlOutputFromFile('Index.html')
         .setTitle('主页');
     }
   }
   

3. 编写主页HTML（Index.html）
   在主页中添加iframe，通过带参数的项目URL加载嵌入页：

   <!DOCTYPE html>
   <html>
     <head>
       <base target="_top">
       <style>
         /* 可自定义iframe样式 */
         iframe {
           width: 100%;
           height: 85vh;
           border: 1px solid #eee;
         }
       </style>
     </head>
     <body>
       <h2>主页内容</h2>
       <p>以下是嵌入的独立页面：</p>
       <!-- 动态获取当前Web应用的URL，避免手动修改 -->
       <iframe src="<?= ScriptApp.getService().getUrl() ?>?action=embedded"></iframe>
     </body>
   </html>
   

4. 部署Web应用

   • 点击右上角「部署」→「新部署」
   • 类型选择「Web应用」
   • 执行权限选择「我」，访问权限根据需求选择（建议选「任何人，甚至匿名」，避免iframe加载权限问题）
   • 点击「部署」，记录生成的Web应用URL

关键注意点 #

• 无需转义特殊符号：EmbeddedContent.html是独立文件，里面的`、"、'等符号直接保留原内容即可，完全不用处理转义
• XFrameOptions设置：必须给嵌入页添加setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)，否则浏览器会阻止iframe加载
• 更新部署：修改文件后需要重新部署并选择「新版本」，否则不会生效

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