如何在Google Apps Script模态框中用变量设置iframe的src？

直接使用src=<?= mylink ?>会因为HTML属性未加引号、变量渲染后格式不符合HTML语法规范，触发“Malformed HTML content”错误，以下是两种正确实现方式：

方式一：模板渲染时给src属性加引号 #

Google Apps Script 端代码 #

function showModalWithIframe() {
  const targetUrl = "https://example.com"; // 替换为你的目标URL
  const htmlTemplate = HtmlService.createTemplateFromFile('modal');
  htmlTemplate.mylink = targetUrl; // 将URL变量传入HTML模板
  const htmlOutput = htmlTemplate.evaluate().setWidth(800).setHeight(600);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, '嵌入iframe的模态窗口');
}

HTML模板文件（命名为modal.html） #

<!DOCTYPE html>
<html>
  <body>
    <!-- 给src属性添加引号，保证HTML语法合规 -->
    <iframe src="<?= mylink ?>" width="100%" height="100%" frameborder="0"></iframe>
  </body>
</html>

方式二：通过JavaScript动态设置iframe的src #

如果担心模板渲染的语法问题，也可以用JS动态赋值，避免直接在HTML属性中插入变量：

HTML模板文件（modal.html） #

<!DOCTYPE html>
<html>
  <body>
    <iframe id="dynamicIframe" width="100%" height="100%" frameborder="0"></iframe>
    <script>
      // 用JSON.stringify处理变量，避免字符串转义问题
      const iframeSrc = <?= JSON.stringify(mylink) ?>;
      document.getElementById('dynamicIframe').src = iframeSrc;
    </script>
  </body>
</html>

GAS端代码和方式一完全一致。

注意事项 #

• <?= ?>会自动转义HTML特殊字符，能有效避免XSS风险；如果不需要转义（比如URL包含特殊转义字符），可以改用<?!= ?>，但需确保传入的URL绝对安全。
• 确认目标URL符合Google Apps Script的同源策略要求，外部URL需是允许加载的合法地址。

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