浏览器在Google Apps脚本中弹出

本文介绍了浏览器在Google Apps脚本中弹出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 背景：我已经在Google应用程序脚本中的HTML服务中准备了一个表单，我用Code.gs中的DoGet函数调用这个表单。 我的doget函数函数doGet（）{返回HtmlService.createTemplateFromFile（'HTMLUI'）。评估（）; } 发布后，它会显示一个简单的浏览器表单，包含一些标签，输入框，提交，重置并找到它上面的按钮。用户将输入信息点击提交，数据将存储在电子表格（后台）中。 - 正常工作到这里。 现在，当用户点击查找按钮 - 弹出一种窗口需要填充时，在这个弹出窗口中，用户可以输入信息（从下拉菜单中）并将所选条目填充回输入框中，然后再次修改并提交。 问题： 我的HTML服务中的find按钮如下所示： < div>< input type =buttononclick =createPopup（）value =Find>< / div> 最后调用javascript： < script type =text / javascript> 函数createPopup（）{ google.script.run.popup（document.forms [0]）; } < / script> CreatePopup（）javascript代码： 函数popup（表单）{ Logger.log（我第一次调用）; // Mycode应该可能在这里我想... Logger.log（我上次被调用）; } 当查看日志时，显示我第一次打电话和我我的研究：我发现Spreadsheet.toast（类似这样的）可以在电子表格上工作，但是我怎样才能得到小的窗口在浏览器上。解决方案 jQuery对话框将满足您的需求。这是一个覆盖当前窗口 - 不是弹出。 演示代码可以很容易地适应Google Apps脚本。在这里，大部分额外的位被删除： Code.js 函数doGet （）{ var template = HtmlService .createTemplateFromFile（'ModalForm'）; var htmlOutput = template.evaluate（） .setSandboxMode（HtmlService.SandboxMode.NATIVE） .setTitle（'jQuery UI Dialog - Modal form'）; 返回htmlOutput; $ / code> ModalForm.html <！ - 改编自http://jqueryui.com/dialog/#modal-form - > < link rel =stylesheethref =https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css/> < script src =https://code.jquery.com/jquery-1.9.1.js>< / script> < script src =https://code.jquery.com/ui/1.10.3/jquery-ui.js>< / script> < script> $（函数（）{ var name = $（#name）， email = $（#email）， password = $（#password ）， allFields = $（[]）.add（name）.add（email）.add（password）， tips = $（.validateTips）; function updateTips （t）{ tips .text（t） .addClass（ui-state-highlight）; setTimeout（function（）{ tips。 $ {}，500）; } $（＃dialog-form）.dialog（{ autoOpen： false， height：300， width：350， modal：true，按钮：{添加用户：function（）{ （bValid）{ $（#users tbody）.append（< （+）+ < td>+ name.val（）+< / td>+ < td>+ email.val（） （+）< / td>+ < td>+ password.val（）+ .dialog（close）; } }，取消：function（）{ $（this）.dialog（close ）; close：function（）{ allFields.val（）.removeClass（）; } }）; $（＃form-action） .button（） .click（function（）{ $（＃dialog-form）.dialog（open ）; }）; }）; < / script> <！ - body - > < div id =dialog-formtitle =新建用户> < form> < fieldset> < label for =name>名称< / label> < input type =textname =nameid =nameclass =text ui-widget-content ui-corner-all/> < label for =email>电子邮件< / label> < input type =textname =emailid =emailvalue =class =text ui-widget-content ui-corner-all/> < label for =password>密码< / label> < input type =passwordname =passwordid =passwordvalue =class =text ui-widget-content ui-corner-all/> < / fieldset> < / form> < / div> < div id =users-containsclass =ui-widget> < h1>现有使用者：< / h1> < table id =usersclass =ui-widget ui-widget-content> < thead> < tr class =ui-widget-header> < th>名称< / th> < th>电子邮件< / th> < th>密码< / th> < / tr> < / thead> < tbody> < tr> < td> John Doe< / td> < td> [email protected]< / td> < td> johndoe1< / td> < / tr> < / tbody> < / table> < / div> < button id =form-action>打开模态表单< / button> Background: I have prepared a form in HTML Service in Google apps script which I call with DoGet function from Code.gs. my doget functionfunction doGet() { return HtmlService.createTemplateFromFile('HTMLUI').evaluate();}Once published it presents a simple browser form with some labels, input box, submit, reset and find buttons on it. The user(s) will input information click submit and the data will get stored in a spreadsheet (background). - Working fine till here.Now when the user clicks find button - a popup kind of window needs to populated, in this popup user can enter information (from a dropdown) and the selected entry would be populated back in the input boxes which can be amended and submitted again.Question:How can I have a POP up kind off window in GAS when on browser.my find button in HTML service is as follows:<div><input type="button" onclick="createPopup()" value="Find"></div>in end for calling the javascript:<script type="text/javascript"> function createPopup() { google.script.run.popup(document.forms[0]); }</script>the CreatePopup()javascript code:function popup(form){Logger.log("I am first called");//Mycode should probably go here I think...Logger.log("I am last called");}When the log is viewed it shows "I am first called" and "I am last called".My research:I found that the Spreadsheet.toast (something like this) works on spreadsheet, but how do I get the small window on browser.. 解决方案 A jQuery dialog will suit your needs. It is an overlay to the current window - not a "pop up".The demo code here can be easily adapted to Google Apps Script. Here it is, with much of the extra bits removed:Code.jsfunction doGet() { var template = HtmlService .createTemplateFromFile('ModalForm'); var htmlOutput = template.evaluate() .setSandboxMode(HtmlService.SandboxMode.NATIVE) .setTitle('jQuery UI Dialog - Modal form'); return htmlOutput;}ModalForm.html<!-- Adapted from http://jqueryui.com/dialog/#modal-form --><link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><script src="https://code.jquery.com/jquery-1.9.1.js"></script><script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><script>$(function() {var name = $( "#name" ),email = $( "#email" ),password = $( "#password" ),allFields = $( [] ).add( name ).add( email ).add( password ),tips = $( ".validateTips" );function updateTips( t ) {tips.text( t ).addClass( "ui-state-highlight" );setTimeout(function() {tips.removeClass( "ui-state-highlight", 1500 );}, 500 );}$( "#dialog-form" ).dialog({autoOpen: false,height: 300,width: 350,modal: true,buttons: {"Add User": function() {var bValid = true;allFields.removeClass( );// validation removedif ( bValid ) {$( "#users tbody" ).append( "<tr>" +"<td>" + name.val() + "</td>" +"<td>" + email.val() + "</td>" +"<td>" + password.val() + "</td>" +"</tr>" );$( this ).dialog( "close" );}},Cancel: function() {$( this ).dialog( "close" );}},close: function() {allFields.val( "" ).removeClass( );}});$( "#form-action" ).button().click(function() {$( "#dialog-form" ).dialog( "open" );});});</script><!-- body --><div id="dialog-form" title="Create new user"><form><fieldset><label for="name">Name</label><input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /><label for="email">Email</label><input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /><label for="password">Password</label><input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /></fieldset></form></div><div id="users-contain" class="ui-widget"><h1>Existing Users:</h1><table id="users" class="ui-widget ui-widget-content"><thead><tr class="ui-widget-header "><th>Name</th><th>Email</th><th>Password</th></tr></thead><tbody><tr><td>John Doe</td><td>[email protected]</td><td>johndoe1</td></tr></tbody></table></div><button id="form-action">Open Modal Form</button> 这篇关于浏览器在Google Apps脚本中弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！