在 userCodeAppPanel 中看不到我的 javascript 代码

Coo*_*per 5 javascript web-applications google-sheets google-apps-script google-chrome-devtools

这是来自 Google 电子表格中包含的脚本的代码。唯一的其他代码是onOpen创建菜单和showDialog()函数的代码

\n
function showDialog(){\n  userInterface=HtmlService.createHtmlOutputFromFile(\'test\');\n  SpreadsheetApp.getUi().showModelessDialog(userInterface, \'Testing Inputs\');\n}\n
Run Code Online (Sandbox Code Playgroud)\n

这是我的 JavaScript

\n
function showDialog(){\n  userInterface=HtmlService.createHtmlOutputFromFile(\'test\');\n  SpreadsheetApp.getUi().showModelessDialog(userInterface, \'Testing Inputs\');\n}\n
Run 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>\n
Run 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>\n
Run 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>\n
Run Code Online (Sandbox Code Playgroud)\n

这是我从另一个项目中提取的一个简单文件。我正在无模式对话框中运行它,但我在使用控制台调试的网络应用程序中遇到了同样的问题。

\n

如果有任何想法,我将不胜感激。我尝试进入设置并单击“恢复默认值并重新加载”。最近我一直在使用控制台进行调试,因为我似乎无法弄清楚这一点。

\n

我想知道这是否与画中画和振动警告有关。我用不同的方式搜索了它们,但找不到任何可以帮助我的东西。

\n
\n

回答你的问题,“当使用原生 Javascript 而不是 jQuery 时,你能重现吗?”

\n
\n

这是 HTML(稍微简化):

\n
Unrecognized 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)"}\n
Run 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>\n
Run 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>\n
Run Code Online (Sandbox Code Playgroud)\n

Rub*_*bén 0

问题顶部显示的开发工具控制台消息不会阻止客户端 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 问题。

有关的

参考