英文:
Changing HtmlOutput in Google Apps Script Web App
问题
在我的Google Apps Script中，我有两个HTML文件，让我们称它们为A.html和B.html。我的doGet()函数如下：
function doGet() {
return HtmlService.createHtmlOutputFromFile('A').setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
它可以工作，但我想在单击按钮时重定向到B页面，或者至少用B页面的内容替换HtmlOutput的内容。通过JavaScript操作更改页面内容是唯一的方法吗，还是可以使用Google提供的一些更智能的方法？
英文:
In my Google Apps Script I have two html files, let's call them A.html and B.html. My doGet() function is this simple one:
function doGet() {
return HtmlService.createHtmlOutputFromFile('A').setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
It works, but I would like to redirect to the B page when clicking a button, or at least replacing the content of the HtmlOutput with the content of the B page. Is changing the content of the page through javascript manipulation the only way or is there some smarter way using the functions provided by Google?
答案1
得分: 1
以下是代码的翻译部分：
Code.gs
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function showTest() {
let html = HtmlService.createTemplateFromFile("HTML_Body");
SpreadsheetApp.getUi().showModalDialog(html.evaluate(),"Test");
}
function getHtml(id) {
let fileName = id === "buttonA" ? "HTML_B" : "HTML_A";
let html = HtmlService.createHtmlOutputFromFile(fileName);
return html.getContent();
}
HTML_Body.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="htmlBody">
<?!= include("HTML_A"); ?>
</div>
<?!= include("JS_ButtonOnClick"); ?>
</body>
</html>
HTML_A.html
<p>This is A</p>
<input id="buttonA" type="button" value="Click Me" onclick="buttonOnClick(this)">
HTML_B.html
<p>This is B</p>
<input id="buttonB" type="button" value="Click Me" onclick="buttonOnClick(this)">
JS_ButtonOnClick
<script>
function buttonOnClick(button) {
try {
google.script.run.withSuccessHandler(
function(html) {
document.getElementById("htmlBody").innerHTML = html;
}
).getHtml(button.id);
}
catch(err) {
alert(err);
}
}
</script>
参考链接
英文:
Here is an example of using GAS to replace the contents of the HTML body. Although I am using a spreadsheet as my basis, I believe it should work with a Web App. I add a <div> to the body so as not to disturb the <script> section.
Code.gs
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function showTest() {
let html = HtmlService.createTemplateFromFile("HTML_Body");
SpreadsheetApp.getUi().showModalDialog(html.evaluate(),"Test");
}
function getHtml(id) {
let fileName = id === "buttonA" ? "HTML_B" : "HTML_A";
let html = HtmlService.createHtmlOutputFromFile(fileName);
return html.getContent();
}
HTML_Body.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="htmlBody">
<?!= include("HTML_A"); ?>
</div>
<?!= include("JS_ButtonOnClick"); ?>
</body>
</html>
HTML_A.html
<p>This is A</p>
<input id="buttonA" type="button" value="Click Me" onclick="buttonOnClick(this)">
HTML_B.html
<p>This is B</p>
<input id="buttonB" type="button" value="Click Me" onclick="buttonOnClick(this)">
JS_ButtonOnClick
<script>
function buttonOnClick(button) {
try {
google.script.run.withSuccessHandler(
function(html) {
document.getElementById("htmlBody").innerHTML = html;
}
).getHtml(button.id);
}
catch(err) {
alert(err);
}
}
</script>
References
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论