Question

我有一个电子表格，我正在使用2列的唯一值并将该数组传递给HtmlService。然后，唯一值将显示为复选框。我可以查看方框，但是当我提交时，我收到一条错误消息： Unsafe JavaScript attempt to initiate navigation for frame with URL... The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.

我已经看到其他一些例子，答案是设置HtmlService.Sandbo‌xMode.NATIVE。我已经做到了，但我仍然遇到了这个错误。

工作原理：将唯一数组传递给HtmlService并创建复选框。在表单提交上，我可以看到我在表单提交时捕获的所选值（在空白页面的网址中）。

我最终需要将已复选的框值作为数组发送回我的.gs代码，进行进一步处理，但我目前仍然遇到这个问题。

代码已更新为工作代码以供参考： （使用此模板将列数组（仅限唯一值）传递给HtmlService，以便创建复选框表单并将选中的复选框作为数组发送回.gs代码）

code.gs

function bugPieChart() {
   getVersionArray();
   openDialog();
   getCheckedValues();
   // rest of spreadsheet code here
}  
function getVersionArray() {
  // I'm making a unique array of 2 columns here. Do whatever array building you like in this part of the code. This gets sent as checkboxes eventually.
  var ss = SpreadsheetApp.getActive();
  var valuesR = ss.getSheetByName("report").getRange('R1:R').getValues();
  var valuesS = ss.getSheetByName("report").getRange('S1:S').getValues();

  var versionRSArray = [];

  for (var i = 0; i < valuesR.length; i++) {
    versionRSArray.push(valuesR[i][0]);
  }

  for (var i = 0; i < valuesS.length; i++) {
    versionRSArray.push(valuesS[i][0]);
  }

  versionRSArray.sort();

  var uniqueArray = [];

  uniqueArray.push(versionRSArray[0]);

  for (var i in versionRSArray ) {  
    if((uniqueArray[uniqueArray.length-1]!=versionRSArray[i]) && (versionRSArray[i] !== "")) {
      uniqueArray.push(versionRSArray[i]);
    }
  }
  return uniqueArray;
}

function openDialog() {    
  var html = HtmlService.createHtmlOutputFromFile('index').setSandboxMod‌e(HtmlService.Sandbo‌xMode.NATIVE);
  SpreadsheetApp.getUi().showModalDialog(html, 'Dialog title'); 
}

function getCheckedValues(checkedValues) {
  Logger.log(checkedValues); // working WIN!!!
}

的index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
      $(function() {
        google.script.run.withSuccessHandler(buildOptionsList)
            .getVersionArray();    
      });
      function buildOptionsList(uniqueArray) {
         var div = document.getElementById('optionList');
         for (var i = 0; i < uniqueArray.length; i++) {
            var checkbox = document.createElement('input');
            checkbox.type = "checkbox";
            checkbox.name =  "checkbox";
            checkbox.value = uniqueArray[i];
            checkbox.id = uniqueArray[i]; 
            var label = document.createElement('label');
            label.appendChild(document.createTextNode(uniqueArray[i]));

            div.appendChild(checkbox);
            div.appendChild(label);
            var linebreak = document.createElement("br");
            div.appendChild(linebreak);            
         }
         setCheckedValues();
      }
      function setCheckedValues() {
        $("#checkBoxForm").submit(function (e) {
          e.preventDefault();
          var checkedValues = [];
          $('input[type="checkbox"]:checked').each(function () {   
             checkedValues.push($(this).val());
           });
           console.log(checkedValues);
           google.script.run.withSuccessHandler(sendCheckedValues)
           .getCheckedValues(checkedValues);
        });
      }

     function sendCheckedValues(checkedValues) {
       console.log('called sendCheckedValues');
       return checkedValues;
     }
    </script>
  </head>
  <body>
    <form id="checkBoxForm">
      <div id="optionList"></div>
      <input type="submit" value="Submit" />
    </form> 
    <input type="button" value="Abort" onclick="google.script.host.close()" />
  </body>
</html>

Answer 1

您看到的错误是由HTML表单提交操作引起的。

处理此问题的最佳方法是阻止表单上的默认表单提交操作，然后使用google.script.run将数据提交到Apps脚本。

您可以通过放置来停止默认操作在submit（）函数中e.preventDefault();，然后使用google.script.run运行服务器端的Apps脚本函数来处理表单提交。

文档中有一个完整的示例：https://developers.google.com/apps-script/guides/html/communication#forms

  function handleFormSubmit(formObject) {
    google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
  }

在哪里＆＃39; updateUrl＆＃39;将是一个客户端javascript函数，＆＃39; processForm＆＃39;是服务端的Apps脚本功能。

HtmlService：将数组从google工作表传递到html服务并传递表单数组返回错误

1 个答案: