Apps Script中HTML模板的manifest及apple-touch-icon链接不显示问题求助

嘿，我看了你遇到的问题，Apps Script里设置的manifest和apple-touch-icon链接在页面元素里找不到，这确实挺让人头疼的，我来帮你排查下可能的原因和解决办法：

最可能的核心问题：忘记调用模板的evaluate()方法 #

从你贴的代码片段来看，最大的嫌疑是你在设置完模板变量后，没有调用htmlTemplate.evaluate()来渲染模板。HtmlService的模板对象必须经过evaluate()处理，才能把<?= 变量名 ?>这种模板语法替换成实际的内容，同时生成可返回给浏览器的HTML内容。如果少了这一步，模板只是个未处理的对象，浏览器根本接不到你写的那两个link标签。

你需要把doGet函数的代码补全，确保最后是返回经过evaluate()处理后的内容，比如：

function doGet(e) {
  const APPLE_ICON_ID = "1d3YFdHEncn3-_kUsw3rPMvRQDwF9YKmE";
  const FAVICON_ID = "1uLI9a2krUi6HlDnRIYXj7EXQIEW_juz6";
  // 这里要确保appUrl已经正确定义，比如是你的Web App部署后的URL
  const appUrl = "https://script.google.com/..."; 
  
  let htmlTemplate = HtmlService.createTemplateFromFile('lanceur');
  htmlTemplate.manifestUrlForJs = `${appUrl}?page=manifest`;
  htmlTemplate.appleIconUrlForJs = `https://drive.google.com/uc?export=view&id=${APPLE_ICON_ID}`;
  
  // 关键：必须调用evaluate()，然后链式调用其他设置方法，最后返回
  return htmlTemplate.evaluate()
    .setFaviconUrl(`https://drive.google.com/uc?id=${FAVICON_ID}&export=download&format=png`)
    .setTitle("Grau d'Agde ☂️");
}

其他需要排查的点 #

1. 确认HTML文件的标签位置
   你要保证那两个link标签是写在lanceur.html文件的<head>标签内部的，比如：

   <!DOCTYPE html>
   <html>
     <head>
       <meta charset="UTF-8">
       <link rel="manifest" href="<?= manifestUrlForJs ?>">
       <link rel="apple-touch-icon" href="<?= appleIconUrlForJs ?>">
       <!-- 其他头部内容 -->
     </head>
     <body>
       <!-- 页面主体内容 -->
     </body>
   </html>
   

   如果把link标签写到了<body>里或者其他错误位置，也可能导致在head区块找不到它们。

2. 检查变量拼写与定义
   虽然你代码里的变量名manifestUrlForJs和appleIconUrlForJs拼写是对的，但要确认：

   • appUrl变量有没有正确定义？如果appUrl是undefined，那manifest的href会变成undefined?page=manifest，但即使这样标签应该还是会显示，只是内容有问题；不过如果连标签都看不到，还是回到第一个问题，大概率是没evaluate模板。

3. 清除浏览器缓存
   有时候浏览器会缓存旧的页面内容，导致你看不到最新的修改。可以按Ctrl+F5强制刷新页面，或者开启开发者工具的“禁用缓存”选项后再刷新试试。

验证方法 #

修改完代码后，重新部署你的Web App（注意要选择“新版本”，不然可能还是旧代码），然后打开页面，按F12检查head标签。如果一切正常，应该能看到这两个link标签已经正确渲染出来了。

内容来源于stack exchange