我想將使用 Google Apps 腳本創建的網路嵌入到 Google 站點。但是，當表單嵌入到這樣的 Google 站點中時，表單中的資料提交按鈕就會失效。
在web表單中，表單訪問者將資料輸入到生成的表單中，并在資料提交后index.html查看。result.html有一個內部鏈接index.html用于連接標題及其相關內容。當表單應用程式未嵌入任何其他站點時，它會成功運行。查看表單應用程式，您會發現資料提交按鈕作業正常。
有人告訴我我錯過了什么嗎？
MWE
我在 Google Apps 腳本的同一個專案中有四個檔案：
index.html產生形式JavaScript.html定義了在index.htmlresult.html在表單提交之后呈現code.gs顯示表單doGet()，并處理提交的資料和呈現result.html。在這個檔案中定義的可以輸入到doPost()include()JavaScript.htmlindex.html
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- <?!= include("css"); ?> -->
</head>
<body onload="addOptions()"> <!--Execute addOptions function immediately after a page has been loaded-->
<form class="" action="<?!= getScriptUrl(); ?>" method="post" onSubmit="document.getElementById('submit').disabled=true;">
<div>
<h1 id="Question">
Choose either cheesecake or chocolate cake.
</h1>
<select id="dropdownList" name="cake" class="form-control">
</select>
</div>
<p>
<div style="width:100px;height:500px;border:1px solid #000;">
Blank box to scroll down
</div>
</p>
<p>
Please do not forget what you've answered in the <a href="#Question" target="_self">question<a>
</p>
<div class="form-submit">
<input type="submit" name="" value="Submit">
</div>
</form>
</body>
<?!= include('JavaScript') ?>
</html>
JavaScript.html
<script>
function addOptions() {
/*This will call server-side Apps Script function getAvailableExps and if it is successful,
it will pass the return value to function addListValues which will add options to the drop down menu*/
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(addListValues)
.getAvailableExps();
}
function addListValues(values) {
//Add options to drop down menu using the values of parameter 'values'.
for (var i = 0; i < values.length; i ) {
var option = document.createElement("option");
option.text = values[i][0];
option.value = values[i][0];
var select = document.getElementById("dropdownList");
select.appendChild(option);
}
}
function onFailure(err) {
alert('Error: ' err.message);
}
</script>
result.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<base />
<title>Thank you for your order!</title>
<!-- <?!= include('css'); ?> -->
</head>
<body>
<p>
Don't forget what you've ordered!
</p>
</body>
</html>
code.gs
var sheetID = "............................................";
var inventory_sheet = "Inventory";
function doGet(){
PropertiesService.getScriptProperties().setProperty("key", "sample");
return HtmlService.createTemplateFromFile("index").evaluate();
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function getScriptUrl() {
var url = ScriptApp.getService().getUrl();
Logger.log(url);
return url;
}
function doPost(e){
var p = PropertiesService.getScriptProperties();
if (p.getProperty("key") == "sample") {
var ss = SpreadsheetApp.openById(sheetID);
var sh = ss.getSheets()[0];
sh.appendRow([String(e.parameters.cake)]);
//update Inventory
var inventory = ss.getSheetByName(inventory_sheet);
var row = inventory.createTextFinder(e.parameters.cake).findNext().getRow();
var range = inventory.getRange(row, 2);
var data = range.getValue();
range.setValue(parseInt(data - 1))
p.deleteProperty("key");
}
return HtmlService.createTemplateFromFile("result").evaluate();
}
function getAvailableExps(){
var inventory = SpreadsheetApp.openById(sheetID).getSheetByName(inventory_sheet);
var data = inventory.getRange(2, 1, 2, 2).getValues();
var filtered = data.filter(arr => arr[1] > 0 || arr[1] != ''); //remove exp to array if quantity is 0 or empty
return filtered;
}
uj5u.com熱心網友回復：
問題和解決方法：
我認為在您的情況下，您的目標很難使用您的展示腳本直接實作。Gustavo 的評論中已經提到了這樣做的原因。
當我看到您的評論時，您似乎需要在 Google 端運行 Web 應用程式。
在這種情況下，我認為可能需要使用解決方法。在這個答案中，為了實作您的目標，我想提出一個解決方法。此解決方法的要點如下。
- 在您的腳本中， 的值
<select id="dropdownList" name="cake" ></select>被發送給表單的doPost使用action="<?!= getScriptUrl(); ?>" method="post"。 - 在此解決方法中，該值使用
google.script.run. 并且，在值完全提交后，HTML 正文被result.html.
當這一點反映在你的腳本中時，它變成如下。
修改后的腳本：
index.html
請index.html進行如下修改。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- <?!= include("css"); ?> -->
</head>
<body id="body" onload="addOptions()">
<form id="form">
<div>
<h1 id="Question">
Choose either cheesecake or chocolate cake.
</h1>
<select id="dropdownList" name="cake" class="form-control">
</select>
</div>
<p>
<div style="width:100px;height:500px;border:1px solid #000;">
Blank box to scroll down
</div>
</p>
<p>
Please do not forget what you've answered in the <a href="#Question" target="_self">question<a>
</p>
<div class="form-submit">
<input type="submit" name="" value="Submit" onclick="sample(this);return false;">
</div>
</form>
</body>
<?!= include('JavaScript') ?>
</html>
JavaScript.html
請將以下函式添加到JavaScript.html.
function sample(e) {
const f = document.getElementById("form");
const obj = { parameters: [...f].reduce((o, g) => (o[g.name] = [g.value], o), {}) };
google.script.run
.withSuccessHandler((res) => {
document.getElementById("body").innerHTML = res;
})
.sample(obj);
}
- 在此示例腳本中，為了直接使用您
doPost的 ，準備了 的值obj。請注意這一點。
Code.gs: Google Apps 腳本端
請將以下函式添加到Code.gs. 此功能使用您的doPost.
function sample(e) {
return doPost(e).getContent();
}
測驗：
當此修改反映在您的腳本中并且您的 Web 應用程式嵌入到 Google 站點時，當單擊提交按鈕時，值將cake發送到 Google Apps 腳本端并result.html顯示。我認為這種情況可能是您的預期結果。
筆記：
此修改是用于解釋解決方法的簡單修改。所以，請根據您的實際情況進行修改。
當您修改 Google Apps 腳本時，請將部署修改為新版本。這樣，修改后的腳本就會反映在 Web Apps 中。請注意這一點。
您可以在“在不更改新 IDE 的 Web 應用程式 URL 的情況下重新部署 Web 應用程式”的報告中查看詳細資訊。
關于 Google 網站上的 Web Apps 的內部鏈接，當嵌入 Web Apps 的 while 頁面并且不顯示滾動條時，內部鏈接似乎不起作用。當顯示框架的滾動條時，鏈接有效。在這種情況下，內部鏈接似乎無法同時使用 HTML 和 Javascript。而且，我無法確認錯誤訊息。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/482978.html
標籤：javascript html 形式 谷歌应用脚本 谷歌网站