在对话框打开时运行谷歌脚本答案

【问题标题】：Run google script on dialog open在对话框打开时运行谷歌脚本
【发布时间】：2016-02-24 04:53:49
【问题描述】：

我正在尝试创建一个脚本，该脚本将从活动单元格中获取图像的 URL，打开一个对话框并显示该图像。通过大量的谷歌搜索和试验和错误，我想出了下面的代码，当用户单击“读取单元格 B2”按钮时，它会在对话框中显示图像。请参阅this link 中的电子表格。

问题：如何避免“读取单元格B2按钮”，以便在对话框打开时自动加载图像？

IndexQ.html：

<!DOCTYPE html>
<html>
  <head> 
    <base target="_top">
  </head>
  <body>
    <script>
      function onSuccess(B2Value) {
      //document.getElementById('output').innerHTML = B2Value;
      document.getElementById('img2').src = B2Value;
      }
    </script>
<div>
    <input type="button" value="Read Cell B2" 
    onclick="google.script.run.withSuccessHandler(onSuccess).returnCellValue('B2')" />
    <br /> 
      Cell B2 contains value: <div id="output"></div> 
    <br />
    <img id="img2" src="" alt="Second Image" height="300">
    <input type="button" value="Close Sidebar" onclick="google.script.host.close()" /></div>
  </body>
</html>

还有 Code.gs：

function onOpen() {
 SpreadsheetApp.getUi()
  .createMenu('Sidebar').addItem('OpenDialog', 'openDialog').addItem('OpenSidebar', 'openSidebar').addToUi()
}

function returnCellValue(cell) {
 return SpreadsheetApp.getActiveSheet().getRange(cell).getValue();
}

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('IndexQ').setSandboxMode(HtmlService.SandboxMode.IFRAME).setHeight(500);
  SpreadsheetApp.getUi().showModalDialog(html, 'Dialog title');
}

【问题讨论】：

标签： javascript google-apps-script google-sheets

【解决方案1】：

您可以使用带有 scriptlet 的模板化 HTML：

<img id="img2" src="<?!= returnCellValue('B2') ?>" alt="Second Image" height="300">

Force-printing scriptlets

您需要修改打开对话框的代码：

function openDialog() {
  var html = HtmlService.createTemplateFromFile('IndexQ')
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME).setHeight(500);

  SpreadsheetApp.getUi().showModalDialog(html, 'Dialog title');
}

注意createTemplateFromFile() 和evaluate() 方法。

或使用在打开对话框时运行的onload 函数：

  <script>
    console.log('it ran!');

    window.onload = function() {//Runs after dialog is loaded
      google.script.run.withSuccessHandler(onSuccess).returnCellValue('B2');

    };
  </script>
</html>

【讨论】：

这是一个很棒的答案！十分感谢！第一种方法完美！我试图学习/理解 onload 部分，但无法让这种方法发挥作用。我尝试的是我将 window.onload 代码放在 openDialogWorks() 中 - 没有用，然后我把它放在脚本标签中 - 没有用。我应该把它放在哪里？
您可以通过选中绿色的大复选标记将其标记为正确答案。感谢您让我知道它有效。
桑迪，你能解释一下如何运行“window.onload”部分吗？我尝试将它放在一个或另一个文件中，但它不起作用。如果我知道如何运行它，那么也许我也可以运行此代码：window.top.document.getElementsByClassName("script-application-sidebar")[0].styl‌e.width='300px ' "300 像素"
我更新了答案以在脚本标签中显示onload。一直到最后，但在最后一个 </html> 标记之前。在window.onload = function() { 中添加console.log('it ran!'); 语句。我猜您遇到的问题是使用 onSuccess() 函数处理从服务器返回的返回。在你的成功函数中也放一个console.log('it ran!');。首先要知道，什么在运行，什么不在运行。我看不出代码有什么问题。

【解决方案2】：

onload 解决方案是使用窗口类。当我在谷歌脚本窗口中键入它后跟一个点时，我没有得到子类弹出选项，所以我不知道我可以输入“onload”。我怎么知道 window.online 代码会起作用，或者我怎么知道它是否存在？
是否可以通过 window.onload 执行此代码： window.top.document.getElementsByClassName("script-application-sidebar")[0].styl‌e.width='300px' "300px" ? 我共享的电子表格也有打开侧边栏的 OpenSidebar 子菜单。我放弃了这种方法，因为我无法使侧边栏足够宽以显示图像。如果从控制台运行，此脚本将完成这项工作。到目前为止，我还没有幸运地找到解决方案，但现在有了这个 window.onload 东西，它可能是可能的吗？！

【讨论】：

Apps 脚本代码编辑器中没有window 对象的帮助上下文。 window 对象是所谓的 DOM 的一部分。它不是 JavaScript。因为它与 JavaScript 紧密集成，所以人们经常把它误认为是 JavaScript。 DOM（文档对象模型）是一种“Web API”，这意味着它提供了一种在 JavaScript 和浏览器之间进行交互的方式。 jQuery 通常用于在 JavaScript 和 DOM 之间建立“桥梁”。但是你不需要 jQuery 来使用 DOM 方法。你可以直接使用 DOM。
一个很好的 DOM 资源是 Mozilla。 getElementById()