是否可以使用HtmlService.createHtmlOutput包含客户端脚本或是否必须使用替代方法?

时间:2014-01-17 19:21:22

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

我最近开始使用Google文档电子表格,并开始尝试编写工作表中的内容。在一个特定的工作表中,我想向用户显示一个自定义对话框,我已设法做到这一点。

现在,我想在对话框中点击一些表行。我写了一些应该完成这项工作的代码,但是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?

1 个答案:

答案 0 :(得分:2)

我的方法是创建如下对话框:

  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。