Coo*_*per 5 javascript web-applications google-sheets google-apps-script google-chrome-devtools
这是来自 Google 电子表格中包含的脚本的代码。唯一的其他代码是onOpen创建菜单和showDialog()函数的代码
function showDialog(){\n userInterface=HtmlService.createHtmlOutputFromFile(\'test\');\n SpreadsheetApp.getUi().showModelessDialog(userInterface, \'Testing Inputs\');\n}\nRun Code Online (Sandbox Code Playgroud)\n这是我的 JavaScript
\nfunction showDialog(){\n userInterface=HtmlService.createHtmlOutputFromFile(\'test\');\n SpreadsheetApp.getUi().showModelessDialog(userInterface, \'Testing Inputs\');\n}\nRun Code Online (Sandbox Code Playgroud)\n这就是我在控制台中单击与“测试代码”相关的链接时看到的内容。
\n<script>\n var idA=[\'pdCliT\',\'pdLocT\',\'pdTypS\',\'pdNamT\',\'pdSupT\',\'pdOutS\',\'pdGasT\',\'pdFloS\',\'pdAmiS\',\'pdUopN\',\'pdVolN\',\'pdDru\',\'pdLOMN\'];\n $(function(){});\n function testInputs(){\n console.log(\'idA.join(\\\',\\\')= %s\',idA.join(\', \'));\n for(var i=0;i<idA.length;i++){\n var id=\'#\' + idA[i];\n var type=String(idA[i]).slice(-1);\n console.log(\'idA[%d]=%s , id= %s\',i,idA[i],id); \n switch(type){\n case \'N\':\n var min=$(id).attr(min);\n var max=$(id).attr(max);\n var val=$(id).val();\n console.log(\'type: number, min: %s, max: %s, val: %s\',min,max,val);\n break;\n case \'T\': \n var val=$(id).val();\n console.log(\'type: text, value: %s\',val);\n break;\n case \'S\':\n console.log(\'value: %s\',$(id).val());\n break;\n default:\n var val=$(id).val();\n console.log(\'value: %s\', val);\n }\n } \n }\n console.log(\'test code\');\n </script>\nRun Code Online (Sandbox Code Playgroud)\n这是整个 html 文件。
\n<!doctype html>\n<style nonce="zBEN3oEdQQRu7CJxQEbQJdjrskg">\n html, body, iframe {\n border: 0;\n display: block;\n height: 100%;\n margin: 0;\n padding: 0;\n width: 100%;\n }\n\n iframe#userHtmlFrame {\n overflow-y: scroll;\n -webkit-overflow-scrolling: touch;\n }\n</style>\n<meta name="chromevox" content-script="no">\n<script type="text/javascript" src="/static/macros/client/js/769718587-mae_html_user_bin_i18n_mae_html_user.js" nonce="zBEN3oEdQQRu7CJxQEbQJdjrskg"></script>\n<script nonce="zBEN3oEdQQRu7CJxQEbQJdjrskg">\n maeInit_(true);\n</script>\n<iframe id="userHtmlFrame" allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; speaker *; usb *; vibrate *; vr *" src="/blank"></iframe>\n<form id="example_form"></form>\nRun Code Online (Sandbox Code Playgroud)\n这是我启动对话框时控制台显示的内容
\n<!DOCTYPE html>\n<html>\n <head>\n <base target="_top">\n <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>\n <script>\n var idA=[\'pdCliT\',\'pdLocT\',\'pdTypS\',\'pdNamT\',\'pdSupT\',\'pdOutS\',\'pdGasT\',\'pdFloS\',\'pdAmiS\',\'pdUopN\',\'pdVolN\',\'pdDru\',\'pdLOMN\'];\n $(function(){});\n function testInputs(){\n console.log(\'idA.join(\\\',\\\')= %s\',idA.join(\', \'));\n for(var i=0;i<idA.length;i++){\n var id=\'#\' + idA[i];\n var type=String(idA[i]).slice(-1);\n console.log(\'idA[%d]=%s , id= %s\',i,idA[i],id); \n switch(type){\n case \'N\':\n var min=$(id).attr(min);\n var max=$(id).attr(max);\n var val=$(id).val();\n console.log(\'type: number, min: %s, max: %s, val: %s\',min,max,val);\n break;\n case \'T\': \n var val=$(id).val();\n console.log(\'type: text, value: %s\',val);\n break;\n case \'S\':\n console.log(\'value: %s\',$(id).val());\n break;\n default:\n var val=$(id).val();\n console.log(\'value: %s\', val);\n }\n } \n }\n console.log(\'test code\');\n </script>\n <style>\n div#menu input[type=button]{margin:0 5px 5px 0;}\n div#content input, select{margin: 5px 2px;}\n #content{width:400px;}\n </style>\n </head>\n <body>\n <div id="menu"></div>\n <div id="content">\n <h1 id="hdg1">Basic Project Data Input</h1>\n <input type="text" id="pdCliT" value="Client Name" placeholder="Client" size="20" /><label for="pdCliT">Client</label><br />\n <input type="text" id="pdLocT" value="Client Location" placeholder="Unit Type" size="20" /><label for="pdLocT">Location</label><br />\n <select id="pdTypS" class="control"><option value="Select Unit Type" selected>Select Unit Type</option></select><label for="pdTypS">Unit Type</label><br />\n <input type="text" id="pdNamT" value="Value 1" placeholder="Unit Name" size="20" /><label for="pdNamT">Unit Name</label><br />\n <input type="text" id="pdSupT" value="Value 2" placeholder="Catalyst Supplier" size="20" /><label for="pdSupT">Catalyst Supplier</label><br />\n <select id="pdOutS" class="control"><option value="Select Catalyst Outcome" selected>Select Catalyst Outcome</option></select><label for="pdOutS">Catalyst Outcome</label><br />\n <input type="text" id="pdGasT" value="Value 3" placeholder="Carrier Gas" size="20" /><label for="pdGasT">Carrier Gas</label><br />\n <select id="pdFloS" class="control"><option value="Select Gas Flow" selected>Select Gas Flow</option></select><label for="pdFloS">Gas Flow</label><br />\n <select id="pdAmiS" class="control"><option value="Select Amine Scrubbing" selected>Select Amine Scrubbing</option></select><label for="pdAmiS">Amine Scrubbing</label><br />\n <input type="number" id="pdUopN" value="5000" placeholder="Operating Pressure psig" size="20" min="0" max="10000" step="100" title="Not greater than 10000" /><label for="pdUopN">Unit Operating Pressure, psig</label><br />\n <input type="number" id="pdVolN" value="1000" placeholder="Reactor Value ft3" size="20" min="0" max="200000" step="1000" title="Not greater than 200000" /><label for="pdVolN">Reactor Volume,ft3</label><br />\n <input type="number" id="pdDruN" value="200" placeholder="Drum of QTRX2" size="20" min="0" max="500" step="100" title="Not greater than 500"/><label for="pdDruN">Drums of QTRX2</label><br />\n <input type="text" id="pdLOMT" value="Value 4" placeholder="Lead OM" size="20" /><label for="pdLOMT">Lead OM</label><br />\n <input type="button" id="tstInputs" value="Test Inputs" onClick="testInputs();" />\n </div>\n </body>\n</html>\nRun Code Online (Sandbox Code Playgroud)\n这是我从另一个项目中提取的一个简单文件。我正在无模式对话框中运行它,但我在使用控制台调试的网络应用程序中遇到了同样的问题。
\n如果有任何想法,我将不胜感激。我尝试进入设置并单击“恢复默认值并重新加载”。最近我一直在使用控制台进行调试,因为我似乎无法弄清楚这一点。
\n我想知道这是否与画中画和振动警告有关。我用不同的方式搜索了它们,但找不到任何可以帮助我的东西。
\n\n\n回答你的问题,“当使用原生 Javascript 而不是 jQuery 时,你能重现吗?” 。
\n
这是 HTML(稍微简化):
\nUnrecognized feature: \'picture-in-picture\'.\niframedAppPanel?mid=ACjPJvGGulDc8kqHqaTVmW8ouofBnAMf3yo988NOBs-h9XUGoRpmfzwLx1oicxsS_tKSejiCuGZgzG7Uk-hD97zxYEj_J7Qna3k88V4wF0VJZqY0qcngq85y83fmy-indV7uqhh-nwbcfmY:11 Unrecognized feature: \'vibrate\'.\nuserCodeAppPanel:2 Unrecognized feature: \'picture-in-picture\'.\nuserCodeAppPanel:2 Unrecognized feature: \'vibrate\'.\nuserCodeAppPanel:30 test code\n2877393808-warden_bin_i18n_warden.js:202 To\xc2\xa0{message: "There was an error during the transport or process\xe2\x80\xa6this request. Error code = 10, Path = /wardeninit", name: "TransportError", stack: "TransportError: There was an error during the tran\xe2\x80\xa6/js/2877393808-warden_bin_i18n_warden.js:186:252)"}\nRun Code Online (Sandbox Code Playgroud)\n和我的控制台日志:
\n<!DOCTYPE html>\n\n<html>\n <head>\n <base target="_top">\n </head>\n <script>\n window.onload=function(){\n console.log(\'onload has run\');\n google.script.run\n .withSuccessHandler(displayDates)\n .getDates();\n }\n function displayDates(datObj){\n var s=\'\';\n gdateObj=datObj;\n for(var i=0;i<datObj.idA.length;i++){\n s+=datObj[datObj.idA[i]+\'-html\'];\n }\n s+=\'<br /><input type="button" value="Save Dates" onClick="saveChanges();" />\';\n s+=\'<input type="button" value="Get Dates" onClick="getDates();" />\';\n s+=\'<input type="button" value="Exit" onClick="google.script.host.close();" />\';\n document.getElementById(\'dates\').innerHTML=s;\n for(var i=0;i<datObj.idA.length;i++){\n document.getElementById(datObj.idA[i]).setAttribute("value",formatDateTime(new Date(datObj[datObj.idA[i]])));\n }\n }\n function formatDateTime(dt){\n if(dt && Object.prototype.toString.call(dt) === \'[object Date]\'){\n var M=dt.getMonth()+1;\n var d=dt.getDate();\n var h=dt.getHours();\n var m=dt.getMinutes();\n var s=dt.getSeconds();\n var MM=(M<10)?String(\'0\'+M):String(M);\n var dd=(d<10)?String(\'0\'+d):String(d);\n var hh=(h<10)?String(\'0\'+ h):String(h);\n var mm=(m<10)?String(\'0\'+m):String(m);\n var ss=(s<10)?String(\'0\'+s):String(s);\n var ds=dt.getFullYear() + \'-\' + MM + \'-\' + dd + \'T\' + hh + \':\' + mm;\n return ds;\n }else{\n throw("Error: Parameter dt is not a valid date");\n }\n }\n </script>\n <body>\n <div id="dates"></div>\n </body>\n</html>\nRun Code Online (Sandbox Code Playgroud)\n屏幕如下所示,其中包含电子表格中的所有日期:
\n\n这是当我点击 javascript 链接时源面板的样子。
\n<!doctype html><style nonce="TqICcsqvIDjfixWz6NYEPlNwdL0">html, body, iframe {border: 0; display: block; height: 100%; margin: 0; padding: 0; width: 100%;}iframe#userHtmlFrame {overflow-y: scroll; -webkit-overflow-scrolling: touch;}</style><meta name="chromevox" content-script="no"><script type="text/javascript" src="/static/macros/client/js/2261581559-mae_html_user_bin_i18n_mae_html_user.js" nonce="TqICcsqvIDjfixWz6NYEPlNwdL0"></script>\n<script nonce="TqICcsqvIDjfixWz6NYEPlNwdL0">maeInit_( true );</script><iframe id="userHtmlFrame" allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; speaker *; usb *; vibrate *; vr *" src="/blank"></iframe><form id="example_form"></form>\nRun Code Online (Sandbox Code Playgroud)\n
问题顶部显示的开发工具控制台消息不会阻止客户端 JavaScript 加载到开发工具中。这些消息是由平台生成的,而不是由客户端代码生成的。
您的客户端代码应显示在“元素”选项卡中。您可以使用查找工具或查看userHtmlFrameiframe 内部。它没有显示在 Sources 选项卡中,因为没有源文件,代码是通过这样的函数添加到 DOM 中的
<script type="text/javascript" nonce="">
(function() {
var el = document.getElementById('sandboxFrame');
el.onload = function() {
goog.script.init("...
</script>
Run Code Online (Sandbox Code Playgroud)
其中...是一个长字符串,在使用“复制”>“外部 html”时可能会被修剪。
如果您的客户端代码是以编程方式生成的,出于调试目的,您可以部署一个 Web 应用程序,该应用程序将客户端代码作为文本而不是 HtmlOutput 对象返回,即
function doGet(e){
const content = HtmlService.createTempleFromFile('index').evaluate().getContent();
return ContentService.createTextOutput(content)
.setMimeType(ContentService.MimeType.TEXT)
}
Run Code Online (Sandbox Code Playgroud)
另一种选择是将客户端 JavaScript 映射到源代码。有关此内容的更多详细信息,请查看最后两个“相关”Stack Overflow 问题。
有关的
参考
| 归档时间: |
|
| 查看次数: |
3475 次 |
| 最近记录: |