是否可以使用 HtmlService.createHtmlOutput 包含客户端脚本，还是必须使用替代方法？答案

【问题标题】：Is it possible to include client-side script using HtmlService.createHtmlOutput or must alternative methods be used?是否可以使用 HtmlService.createHtmlOutput 包含客户端脚本，还是必须使用替代方法？
【发布时间】：2014-01-17 19:21:21
【问题描述】：

我最近开始使用 Google Docs 电子表格，并开始尝试在表格中编写脚本。在一个特定的工作表中，我想向用户显示一个自定义对话框，我已经设法做到了。

现在，我想让对话框中的一些表格行可点击。我写了一些应该完成这项工作的代码，但 Caja 似乎正在删除我写的代码。

简化版的代码（还是有问题）：

function showSkillsForCurrentLevel() {
  var html, out, app;

    html = '<div>Text. Yay!</div>'
    + '<script>'
    + '(function(){'
    + '    "use strict";'
    + '    var toggleFinished = function toggleFinished(){'
    + '            this.classList.toggle("finished");'
    + '        },'
    + '        rows,'
    + '        i = 0;'
    + '    rows = document.getElementsByClassName("skill-leveling").getElementsByClassName("finishable");'
    + '    if (rows.length) {'
    + '        for (i = 0; i < rows.length; i += 1) {'
    + '            rows[i].onclick = toggleFinished;'
    + '        }'
    + '    }'
    + '}());'
    + '</script>';  
    out = HtmlService.createHtmlOutput(html).setSandboxMode(HtmlService.SandboxMode.NATIVE).setTitle('Leveling Plan').setWidth(400).setHeight(400);
    app = SpreadsheetApp.getActiveSpreadsheet();
    app.show(out);
};

我在显示的对话框中得到的是：

<caja-v-body>
    <div>Text. Yay!</div>
    <script></script>
</caja-v-body>

我认为 Caja 出于某种原因剥离了代码，但我似乎找不到任何文档或示例，说明如何在 Code.gs 中正确包含脚本，以便它们在 Caja 清理后保持完整。

我假设其他人遇到过这个问题，我希望有人能分享解决方案。

TLDR 版本：

如何在HtmlService.createHtmlOutput 创建的对话框中包含 JavaScript？

【问题讨论】：

标签： google-apps-script google-docs google-caja

【解决方案1】：

我的方法是创建这样的对话框：

  var htmlOutput = HtmlService.createHtmlOutputFromFile("customdialog.html").setTitle("your title").setWidth(350);
  htmlOutput.setSandboxMode(HtmlService.SandboxMode.NATIVE);
  DocumentApp.getUi().showDialog(htmlOutput)

对话框的实际内容位于名为 customdialog.html 的单独 HTML 文件中。示例实现可能是：

<html>
  <head>
    <script src="http://remoteserver/yourscript.js"></script>
    <script>... a local script</script>
  <body>
  <div>hello dialog</div>
  </body>
</html>

您甚至可以包含来自远程服务器的 javascript，如示例所示。我设法通过这种方法在对话框中包含 jquery 并使用 jquery。

【讨论】：

虽然我可以理解您的方法有效 (+1)，但是否有任何文档说明我的问题中列出的方法不起作用，或说明如何在动态 HTML 中包含脚本？
很遗憾没有。当我注意到你的问题时，我正在处理这个问题，所以我按原样分享。您似乎遇到了 CAJA 问题，您使用的 javascript 一定有一些不安全的地方。