我在谷歌应用程序脚本中使用Materialize表单，如下所示。
如果我在按钮的属性中放入'name="action"'，并且它不调用服务器端函数，我会得到一个错误。我想知道这是为了什么，以及我为什么会出错。
test.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script>
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function readFile(formObject) {
google.script.run.upload(formObject);
}
</script>
</head>
<body>
<div class="container">
<form id="myForm" onsubmit="readFile(this)" enctype="multipart/form-data">
<input name="myFile" type="file" /><br>
<div class="row">
<button class="btn waves-effect waves-light" type="submit" name="action" id="btn">Submit<i class="material-icons right">send</i></button>
</div> <!-- END OF ROW -->
</form>
</div>
</body>
</html>服务器端：
function doGet() {
let tmp = HtmlService.createTemplateFromFile('test');
return tmp.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function upload(formObj) {
Logger.log('upload called');
Logger.log(formObj);
}我在Chrome的控制台日志中得到的错误是：
拒绝装帧'https://xxxxxxx-script.googleusercontent.com/'，因为祖先违反了以下内容安全策略指令："框架祖先'self'"。
并且抛出HTTP 500的NetworkError。
考虑
显然，至少有一个name属性等于"action"的输入会触发这种行为：
<!-- The form action attribute will change referencing the input field when passing the form Object to googe.script.run.myFunction() method-->
<!-- From this: -->
<form id="myForm" onsubmit="readFile(this)" enctype="multipart/form-data">
<!-- To this: -->
<form id="myForm" onsubmit="readFile(this)" enctype="multipart/form-data" action="[object HTMLButtonElement]" method="get" target="">
解决方案
由于除了form对象之外，您不能向服务器传递任何其他DOM元素，因此必须更改按钮的name属性才能使其工作。
参考
表单HTML服务