Google Web 应用程序 - 从默认 html 文件生成另一个 html
我需要让用户选择一个值，然后我想生成一个新的 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。我怎样才能做到这一点？
ibeautiful1回答
-
慕妹3242003
几点：您需要一个value，否则 value 为空。你yourServerSideFunc(body)有两个返回值，显然第二个没有被执行。如果要将用户重定向到不同的页面，请通过重定向来实现。但是如果你想更新基本 html中的内容，那么你可以使用 HTML 元素的 style 属性来隐藏或显示元素。您还可以在您的中实现一些条件doGet(e)，并根据参数或其集合呈现不同的内容。这将在同一 URL 处生成不同的 HTML。例如：1- 用户访问您的网络应用程序，因此doGet()被执行。2-用户从下拉列表中选择一个选项，因此浏览器侦听点击事件并执行listS()。3-将返回 HTML 内容listS()的用户选择的值传递给回调。yourServerSideFuncshowDiv4-showDiv执行并更新 HTML 内容。代码.gsfunction 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>进一步阅读：Apps 脚本模板化 HTML
随时随地看视频慕课网APP
相关分类
JavaScript