Question

我想使用html service google apps脚本创建一个交互式Web应用程序。

我无法将带有函数的onclick事件添加到按钮中。

首次加载Web时会执行这些功能，但是在单击时不会执行。如果我稍后点击按钮，则没有任何反应。

Code.gs：

function doGet() {
  var template = HtmlService.createTemplateFromFile('Index');

  return template.evaluate()
      .setTitle('Web App Window Title')
      .setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
function getmenus() {
  var folder = DriveApp.getFolderById('0B5vEst6Tvg8nfmhRU1h4V044ODJlX2VxeHdKeFFicUx0UlMzMWhZcUxjTkRHSlZiR3FlT1k');
  var datax = []
  var result = [[]];
  var filess = folder.getFilesByType(MimeType.GOOGLE_SHEETS);
  while (filess.hasNext()) {
    datax.push(filess.next());
  }
  datax.sort(function sorting(x,y){
      var xp = x.getName().toLowerCase();
      var yp = y.getName().toLowerCase();
      return xp == yp ? 0 : xp < yp ? -1 : 1;
    });
  for (var a in datax) {
    var ss = SpreadsheetApp.openById(datax[a].getId());
    var info = ss.getSheetByName('Info');
    var url = info.getRange('B1').getValue();
    result[a] = [datax[a].getName(),datax[a].getId(),url];
  }
  return result;
}
function processmenu(result) {
  var ss = SpreadsheetApp.openById(result);
  var sheet = ss.getActiveSheet();
  var range = sheet.getDataRange();
  var values = range.getValues();
  return values;
}

JavaScript.html：

<script>

google.script.run.withSuccessHandler(loadmenu).getmenus();

function loadmenu(result) {
  var mainmenu = document.getElementById('menunav');
  mainmenu.innerHTML='';
  for (var a in result) {
    var form = document.createElement('form');
    var hidden = document.createElement('input');
    hidden.type='hidden';
    hidden.name='name';
    hidden.value=result[a][1];

    var button = document.createElement('input');
    button.type='button';
    button.name='menu';
    button.value=result[a][0];
    button.onclick=menuclick(result[a][1]);

    form.appendChild(hidden);
    form.appendChild(button);

    mainmenu.appendChild(form);
    var br = document.createElement("br");
    mainmenu.appendChild(br);

  }
}
function menuclick(result) {
google.script.run.withSuccessHandler(updateoptions).processmenu(result);
}
function updateoptions(values) {
  alert(values);
}

</script>

请帮助我解决问题，以及如何以更好的方式重写代码。

由于

Answer 1

这是一个棘手的问题。使用DOM设置onclick属性需要一个函数。并且您不能使用文本公式作为函数，因为它计算为字符串而不是对象。因此，您需要使用new关键字创建新函数。现在你有：

button.onclick=menuclick(result[a][1]);

更改为：

var newFunction = new Function("menuclick('" + result[a][1] + "')");
button.onclick=newFunction;

onclick属性的值必须是函数。在您的情况下，您需要构造一个具有要传递的动态参数的函数。您可以使用字符串公式构造公式的文本部分。但是后来需要使用字符串来创建一个函数对象。

在JavaScript中，您可以使用加号连接字符串值。

"menuclick('"是一个字符串。

result[a][1]是一个字符串。

"')"是一个字符串。

请注意，您需要在其他两个字符串之间隔离result[a][1]部分。这是因为需要评估result[a][1]，并从对象数组中检索值。

我还会将google.script.run调用放入window.onload事件：

window.onload = function() {
  console.log("window.onload ran!");
  google.script.run.withSuccessHandler(loadmenu).getmenus();
};

另外，使用IFRAME沙盒模式：

.setSandboxMode(HtmlService.SandboxMode.IFRAME);

Answer 2

仅供参考，对于来自google的其他任何人，上面选择的答案对我来说不起作用。

var newFunction = new Function("functionName(" + param + ")");
element.onclick=newFunction;

我不得不这样做

element.setAttribute("onclick","functionName(" + param + ")");

使用JavaScript

2 个答案: