我需要让用户选择一个值，然后我想生成一个新的 html 页面，该页面将显示所选值。Step1：应用程序生成一个值列表，用户需要选择一个值（我知道怎么做，我在这个测试中使用了一个简化版本）Step2：一旦用户单击该值，就会生成一个新的html文件，并且选定的值将显示为文本（我不知道该怎么做）默认的 html 文件如下（f.html）：<!DOCTYPE html><html> <head> <base target="_top"> </head> <body> <p style="text-align: center;">Test - Step 1</p><p style="text-align: center;"> </p><p style="text-align: center;"><select id="sel1" style="width: 230px; height: 35px; margin: 0px 0 0px 0;"><option selected="selected" value="">email</option></select></p><script>function listS() { const selectElem = document.getElementById('sel1'); const index = selectElem.selectedIndex; if (index > -1) { const e = document.getElementById("sel1"); const value = e.options[index].value; const body = { index: index, value: value }; google.script.run.withSuccessHandler(yourCallBack).yourServerSideFunc(body); } }document.getElementById("sel1").addEventListener("click",listS);function yourCallBack() {}</script> </body></html>js文件是：function doGet() { var output = HtmlService.createHtmlOutputFromFile('f'); return output;}function yourServerSideFunc(body) { var value = body["value"]; var output = HtmlService.createHtmlOutputFromFile('f2'); return output; return ContentService.createTextOutput(JSON.stringify({message: "ok"})).setMimeType(ContentService.MimeType.JSON);}新的 html 文件 (f2) 是：<!DOCTYPE html><html> <head> <base target="_top"> </head> <body> <p id="test"style="text-align: center;">Your value is</p><p style="text-align: center;"> </p> </body></html>一旦能够生成新的 html，我需要将文本更改为：“您的值是：”+value。但是我什至无法生成 f2.html。我怎样才能做到这一点？
1 回答
慕妹3242003
TA贡献1824条经验 获得超6个赞
几点：
您需要一个value，否则 value 为空。
你
yourServerSideFunc(body)有两个返回值，显然第二个没有被执行。如果要将用户重定向到不同的页面，请通过重定向来实现。但是如果你想更新基本 html中的内容，那么你可以使用 HTML 元素的 style 属性来隐藏或显示元素。
您还可以在您的中实现一些条件
doGet(e)，并根据参数或其集合呈现不同的内容。这将在同一 URL 处生成不同的 HTML。
例如：
1- 用户访问您的网络应用程序，因此doGet()被执行。
2-用户从下拉列表中选择一个选项，因此浏览器侦听点击事件并执行listS()。
3-将返回 HTML 内容listS()的用户选择的值传递给回调。yourServerSideFuncshowDiv
4-showDiv执行并更新 HTML 内容。
代码.gs
function doGet() {
var output = HtmlService.createHtmlOutputFromFile('f');
return output;
}
function yourServerSideFunc(body) {
console.log(body);
var value = body["value"];
var output = HtmlService.createTemplateFromFile('f2');
output.value = value;
return output.evaluate().getContent();
}
f.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p style="text-align: center;">Test - Step 1</p>
<p style="text-align: center;"> </p>
<select id="sel1" style="width: 230px; height: 35px; margin: 0px 0 0px 0;">
<option selected="selected" value="email">email</option>
</select>
<div id="resultDiv" style="display: None;"></div>
<script>
function listS() {
const selectElem = document.getElementById('sel1');
const index = selectElem.selectedIndex;
if (index > -1) {
const e = document.getElementById("sel1");
const value = e.options[index].value;
const body = {
index: index,
value: value
};
google.script.run.withSuccessHandler(showDiv).yourServerSideFunc(body);
}
}
function showDiv(value) {
var resultDiv = document.getElementById("resultDiv");
resultDiv.innerHTML = value;
resultDiv.style.display = "Block";
}
document.getElementById("sel1").addEventListener("click", listS);
</script>
</body>
</html>
f2.html
<p id="test"style="text-align: center;">Your value is</p>
<p style="text-align: center;"><?= value ?></p>
进一步阅读：
添加回答
举报
0/150
提交
取消