Google Web App onload脚本无法处理HTML输出

时间：2016-01-26 19:39:19

标签： javascript web-applications google-apps-script

我有一个提供HTML文件的code.gs文件，其中包含一个onload函数以及一个触发同一文件中另一个函数的按钮。当我单击按钮时，不会触发onclick事件，并且在访问Web应用程序时也不会触发onload函数。 

    function doGet() {

   var html = HtmlService.createHtmlOutputFromFile('Index');
html.setSandboxMode(HtmlService.SandboxMode.IFRAME)  
html.setWidth(800);
  html.setHeight(400);



  return html;
}

function populate1(){


  //CHANGE spreadsheet ID
var a = SpreadsheetApp.openById("1ea4hkN48Tu9M9y03e_Xrxp_s8hk882UzzOVtk4HVRlE");

  //sheets
  var ERsheet = a.getSheetByName("Equipment request");
  var TRsheet = a.getSheetByName("Troubleshooting");
  var OTsheet = a.getSheetByName("Other requests");

  //lrs
  var ERlr = ERsheet.getLastRow();
  var TRlr = TRsheet.getLastRow();
  var OTlr = OTsheet.getLastRow();

  //lrs 2
  var ERlr2 = (ERsheet.getLastRow() - 1);
  var TRlr2 = (TRsheet.getLastRow() - 1);
  var OTlr2 = (OTsheet.getLastRow() - 1);

  //lrs 3
  var ERlr3 = (ERsheet.getLastRow() - 2);
  var TRlr3 = (TRsheet.getLastRow() - 2);
  var OTlr3 = (OTsheet.getLastRow() - 2);



  //copyranges

  //ER
  var ERcro11 = ERsheet.getRange(ERlr, 1, 1, 1).getValue();
   var ERcro12 = ERsheet.getRange(ERlr, 2, 1, 1).getValue();
    var ERcro13 = ERsheet.getRange(ERlr, 3, 1, 1).getValue();
     var ERcrd1 = ERsheet.getRange(ERlr, 5, 1, 1).getValue();
  var ERcro21 = ERsheet.getRange(ERlr2, 1, 1, 1).getValue();
   var ERcro22 = ERsheet.getRange(ERlr2, 2, 1, 1).getValue();
    var ERcro23 = ERsheet.getRange(ERlr2, 3, 1, 1).getValue();
     var ERcrd2 = ERsheet.getRange(ERlr2, 5, 1, 1).getValue();
  var ERcro31 = ERsheet.getRange(ERlr3, 1, 1, 1).getValue();
   var ERcro32 = ERsheet.getRange(ERlr3, 2, 1, 1).getValue();
    var ERcro33 = ERsheet.getRange(ERlr3, 3, 1, 1).getValue();
     var ERcrd3 = ERsheet.getRange(ERlr3, 5, 1, 1).getValue();

  //TR
  var TRcro11 = TRsheet.getRange(TRlr, 1, 1, 1).getValue();
   var TRcro12 = TRsheet.getRange(TRlr, 2, 1, 1).getValue();
    var TRcro13 = TRsheet.getRange(TRlr, 3, 1, 1).getValue();
     var TRcr1 = TRsheet.getRange(TRlr, 5, 1, 1).getValue();
  var TRcro21 = TRsheet.getRange(TRlr2, 1, 1, 1).getValue();
   var TRcro22 = TRsheet.getRange(TRlr2, 2, 1, 1).getValue();
    var TRcro23 = TRsheet.getRange(TRlr2, 3, 1, 1).getValue();
     var TRcr2 = TRsheet.getRange(TRlr2, 5, 1, 1).getValue();
  var TRcro31 = TRsheet.getRange(TRlr3, 1, 1, 1).getValue();
   var TRcro32 = TRsheet.getRange(TRlr3, 2, 1, 1).getValue();
    var TRcro33 = TRsheet.getRange(TRlr3, 3, 1, 1).getValue();
     var TRcr3 = TRsheet.getRange(TRlr3, 5, 1, 1).getValue();

  //OT
  var OTcro1 = OTsheet.getRange(OTlr, 1, 1, 1).getValue();
   var OTcro1 = OTsheet.getRange(OTlr, 2, 1, 1).getValue();
    var OTcro1 = OTsheet.getRange(OTlr, 3, 1, 1).getValue();
     var OTcr1 = TRsheet.getRange(OTlr, 5, 1, 1).getValue(); 
  var OTcro2 = OTsheet.getRange(OTlr2, 1, 1, 1).getValue();
   var OTcro2 = OTsheet.getRange(OTlr2, 2, 1, 1).getValue();
    var OTcro2 = OTsheet.getRange(OTlr2, 3, 1, 1).getValue();
     var OTcr2 = TRsheet.getRange(OTlr2, 5, 1, 1).getValue();   
  var OTcro3 = OTsheet.getRange(OTlr3, 1, 1, 1).getValue();
   var OTcro3 = OTsheet.getRange(OTlr3, 2, 1, 1).getValue();
    var OTcro3 = OTsheet.getRange(OTlr3, 3, 1, 1).getValue();
     var OTcr3 = TRsheet.getRange(OTlr3, 5, 1, 1).getValue(); 


  var g = 0;
  //JSONArray jsarray = new JSONArray();

// var json = [
 //  {"ERc1c1":ERcro11, "ERc1c2":ERcrd1}, 
 //   {"ERc2c1":ERcro21, "ERc2c2":ERcrd2}, 
 //   {"ERc3c1":ERcro31, "ERc3c2":ERcrd3}
 //  ];


  return (ERcro11, ERcro12, ERcro13, ERcrd1,
          ERcro21, ERcro22, ERcro23, ERcrd2,
          ERcro31, ERcro32, ERcro33, ERcrd3);





      }

代码服务于Index.HTML，这是下面的文件

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
<style> 
tablestats{
align: right;
right-padding: 20px;
padding: 20px;
}
body{
border: 5px;

}

</style>
<script src="https://apis.google.com/js/api.js?onload=onApiLoad">
</script>
    <script>
function filler1(ERcro11, ERcro12, ERcro13, ERcrd1,
          ERcro21, ERcro22, ERcro23, ERcrd2,
          ERcro31, ERcro32, ERcro33, ERcrd3){






//dates
//var date1 = document.getElementByID("date1").innerHTML = ERcro11;
//var date2 = document.getElementByID("date2").innerHTML = ERcro21;
//var date3 = document.getElementByID("date3").innerHTML = ERcro31;
//var date4 = document.getElementByID("date4").innerHTML = ;
//var date5 = document.getElementByID("date5").innerHTML = ;
//var date6 = document.getElementByID("date6").innerHTML = ;
//var date7 = document.getElementByID("date7").innerHTML = ;
//var date8 = document.getElementByID("date8").innerHTML = ;
//var date9 = document.getElementByID("date9").innerHTML = ;

//senders
//var sender1 = document.getElementByID("sender1").innerHTML = ERcro12;
//var sender2 = document.getElementByID("sender2").innerHTML = ERcro22;
//var sender3 = document.getElementByID("sender3").innerHTML = ERcro32;
//var sender4 = document.getElementByID("sender4").innerHTML = ;
//var sender5 = document.getElementByID("sender5").innerHTML = ;
//var sender6 = document.getElementByID("sender6").innerHTML = ;
//var sender7 = document.getElementByID("sender7").innerHTML = ;
//var sender8 = document.getElementByID("sender8").innerHTML = ;
//var sender9 = document.getElementByID("sender9").innerHTML = ;

//types
//var type1 = document.getElementByID("type1").innerHTML = ERcrd1;
//var type2 = document.getElementByID("type2").innerHTML = ERcrd2;
//var type3 = document.getElementByID("type3").innerHTML = ERcrd3;
//var type4 = document.getElementByID("type4").innerHTML = ;
//var type5 = document.getElementByID("type5").innerHTML = ;
//var type6 = document.getElementByID("type6").innerHTML = ;
//var type7 = document.getElementByID("type7").innerHTML = ;
//var type8 = document.getElementByID("type8").innerHTML = ;
//var type9 = document.getElementByID("type9").innerHTML = ;

//duedates
document.getElementByID("request1").innerHTML = "hola";
//var duedate2 = document.getElementByID("request2").innerHTML = ;
//var duedate3 = document.getElementByID("request3").innerHTML = ;
//var duedate4 = document.getElementByID("request4").innerHTML = ;
//var duedate5 = document.getElementByID("request5").innerHTML = ;
//var duedate6 = document.getElementByID("request6").innerHTML = ;
//var duedate7 = document.getElementByID("request7").innerHTML = ;
//var duedate8 = document.getElementByID("request8").innerHTML = ;
//var duedate9 = document.getElementByID("request9").innerHTML = ;


}

function trigger(){

google.script.run.withsuccesshandler(filler1).populate1();



}

function testfunc(){

document.getElementByID("date1").innerHTML = "test";


}


<?!= include('script_js'); ?>
</script>
  </head>



  <body onload="testfunc()">


<table width="40%" class="tablestats">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Mobile</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td class="Date" id="date1">x</td><td class="sender" id="sender1">x</td><td class="Type" id="type1" >x</td><td class="due date1" id="request1">x</td></tr>
                        <tr><td class="Date" id="date2">x</td><td class="sender" id="sender2">x</td><td class="Type" id="type2" >x</td><td class="due date" id="request2">x</td></tr>
                        <tr><td class="Date" id="date3">x</td><td class="sender" id="sender3">x</td><td class="Type" id="type3" >x</td><td class="due date" id="request3">x</td></tr>
                        <tr><td class="Date" id="date4">x</td><td class="sender" id="sender4">x</td><td class="Type" id="type4" >x</td><td class="due date" id="request4">x</td></tr>
                        <tr><td class="Date" id="date5">x</td><td class="sender" id="sender5">x</td><td class="Type" id="type5" >x</td><td class="due date" id="request5">x</td></tr>
                        <tr><td class="Date" id="date6">x</td><td class="sender" id="sender6">x</td><td class="Type" id="type6" >x</td><td class="due date" id="request6">x</td></tr>
                        <tr><td class="Date" id="date7">x</td><td class="sender" id="sender7">x</td><td class="Type" id="type7" >x</td><td class="due date" id="request7">x</td></tr>
                        <tr><td class="Date" id="date8">x</td><td class="sender" id="sender8">x</td><td class="Type" id="type8" >x</td><td class="due date" id="request8">x</td></tr>
                        <tr><td class="Date" id="date9">x</td><td class="sender" id="sender9">x</td><td class="Type" id="type9" >x</td><td class="due date" id="request9">x</td></tr>
                    </tbody>
                </table>
<!--<input type="button" onclick="testfunc()"> Populate </input> -->
<button onclick="testfunc()">Click me</button>



  </body>
</html>

我的code.gs文件中是否需要DoPost（e）函数？我不明白为什么即使在onclick调用时也没有运行HTML文件中设置的脚本文件。

1 个答案:

答案 0 :(得分：0)

你不应该只需要运行基本上是AJAX的doPost（e）。您需要使用Google脚本运行程序，以便客户端脚本与您的应用程序脚本进行通信。

以下是Client-Server Communication in Apps Script的参考资料。

相关问题
最新问题