带有 jQ​​uery 的 Safari 和 Firefox 中的 Javascript（严格）错误

Question

如果所有必填字段都不完整并且是我使用 Google Apps 脚本创建的表单的一部分，我有以下 javascript 函数可以阻止表单提交。请注意，#submitbutton 实际上是一个常规按钮，Google Apps 脚本强制使用严格的 javascript。该脚本在 chrome 上运行良好，但是当我在 Safari 或 Firefox 上测试它时，它似乎没有运行。我是否使用仅适用于 Chrome 的方法？我在这里遗漏了什么吗？

我在 Safari 中收到以下错误： Uncaught TypeError: undefined is not a function (evaluating '(1, $)('#submitbutton')') 和 Uncaught Strict mode does not allow function declarations in a lexically nested statement.

Firefox 给出了类似的问题：Uncaught in strict mode code, functions may be declared only at top level or immediately within another function 2699307207-maestro_htmlapp_bin_maestro_htmlapp.js:84:360 和 Uncaught TypeError: $ is not a function

<script type="text/javascript">
$('#submitbutton').on('click', function() {
   $(this).val("Submitting...");
   //check for required fields
   var emptyFields = $('[required]').filter(function() {
       $(this).removeClass("warning");
       if ($(this).val().length === 0){
         $(this).addClass("warning")
         return true
       } else {
         return false
       }
   });

   if (emptyFields.length === 0) {
       $(this).prop('disabled', true);
       document.getElementById('incompleteWarning').style.display = 'none';
       document.getElementById('bePatient').style.display = 'inline';
       google.script.run.withSuccessHandler(fileUploaded).uploadFiles(this.parentNode);
    } else{
      $(this).val("Submit Application")
      document.getElementById('incompleteWarning').style.display = 'inline';
      document.getElementById('incompleteWarning').style.color = 'red';
    }
});
</script>

jsfiddle 在这里：https://jsfiddle.net/hofresre/

请注意，jsfiddle 不使用 google.script，而是将其替换为 this.parentNode.submit()

非常感谢任何帮助。

每厘米：

maestro_htmlapp_bin_maestro_htmlapp.js:84:360 的第 84 行： function ys(a){for(var b=[],c=0;c<a.length;++c){var d=a[c];b[c]=Mn(d)?(new String(d)).toString():d}return b}var As=[vh,"[object Object]"];var Bs=["alert",ts(function(a){return alert(a)},16,[4]),"confirm",ts(function(a){return confirm(a)},16,[4]),"prompt",ts(function(a,b){return prompt(a,b)},16,[4,4])];var Cs=window.console&&window.console.error?function(a){window.console.error(a)}:void 0,Ds=window.console&&window.console.info?function(a){window.console.info(a)}:void 0,Es=window.console&&window.console.log?function(a){window.console.log(a)}:void 0,Fs=window.console&&window.console.warn?function(a){window.console.warn(a)}:void 0,Gs=["console.debug",ts(window.console&&window.console.debug?function(a){window.console.debug(a)}:void 0,16,[4]),"console.error",ts(Cs,16,[4]),"console.info",ts(Ds,16,[4]),

Answer 1

我猜你知道浏览器不支持网络功能的方式相同。我们知道，谷歌总是首先关注他们的网络库和他们对 chrome 浏览器的支持。

当你遇到这个错误时：

函数只能在顶层或直接在另一个函数中声明

您不能将函数声明放在任何其他块中，例如 if-statement 或 for-loop;导致任何使用花括号的块范围：try-catch-finally、if-else if-else、for、switch 和 ES6 还定义了利用块作用域的新特性，例如类。

你不能："use strict" { Function bar(){/****/} }

因此，我可以提供的独立解决方案是：

• 查找是否存在已解决此问题的脚本版本（此处为 google 脚本或 JQuery）（最新版本）。
• 您也可以在相应的脚本中（例如在google脚本中）评论"use strict"。
• 表明您首先包含 google 脚本和 JQuery，然后再添加其他 js 脚本。
• 尝试使用非缩小的脚本库，因为某些东西（附加 JQuery 1.11 的示例）是问题的原因。

在尝试以前的解决方案之前，也许这个修改后的代码可以工作：

<script type="text/javascript">

var trySubmission = function() {
 $(this).val("Submitting...");
 //check for required fields
 var emptyFields = $('[required]').filter(function() {
   $(this).removeClass("warning");
   if ($(this).val().length === 0){
     $(this).addClass("warning")
     return true
   } else {
     return false
   }
 });

 if (emptyFields.length === 0) {
   $(this).prop('disabled', true);
   document.getElementById('incompleteWarning').style.display = 'none';
   document.getElementById('bePatient').style.display = 'inline';
   google.script.run.withSuccessHandler(fileUploaded).uploadFiles(this.parentNode);
 } else{
  $(this).val("Submit Application")
  document.getElementById('incompleteWarning').style.display = 'inline';
  document.getElementById('incompleteWarning').style.color = 'red';
 } ;
}

$('#submitbutton').on('click', trySubmission ) ;

</script>

Answer 2

您从 GS 文件加载 HTML 的模式是什么？

当在 SandboxMode.NATIVE 中发生错误时，SandboxMode.IFRAME 似乎工作正常

这是 GS 文件的一些测试代码

function doGet(e) {
   var html= HtmlService.createTemplateFromFile("test.html");   
   return html.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

...HTML 为 test.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

   function myFunction() {

    if (jQuery) {  
     // jQuery is loaded  
       console.log( "Loaded" );
     } else {
     // jQuery is not loaded
      console.log( "Not Loaded" );
     }
     $("#message").html("Something happened.");
   }

   $(document).ready(myFunction);

</script>
<p id="message">Nothing happened. </p>