我正在如下使用Google应用程序脚本中的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/'，因为祖先违反了以下内容安全策略指令：“ frame-ancestors'self'”。
并且抛出HTTP 500的NetworkError。
显然，至少有一个名称属性等于“ 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属性，以使其起作用。