我想使用Google Apps脚本构建多页网站。为此,我想利用doGet()
处理查询字符串的能力。我知道至少有一个解决此问题的方法:
Linking to another HTML page in Google Apps Script
但是,该解决方案似乎过于严格,因为它依赖GAS的templated html feature在页面加载时直接在HTML内用查询字符串构建正确的URL。更具通用性的解决方案是基于动态UI状态和用户界面操作在jquery(或javascript)函数内构建适当的查询字符串。这可能吗?怎么做到呢?
这是我对可能的解决方案的建议(不起作用!):
HTML / JQuery:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>Speedgolf Scoring</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body id = "mainBody">
<H1>LOGIN PAGE</H1>
<H3>Please choose interface:</H3>
<button id = "playerUI">Follow Player</button>
<button id = "holeUI">Follow Hole</button>
<button id = "flexUI">Roaming Scorer</button>
</body>
</html>
<script>
function loadNewPage(result, userObject) {
var newURL = result + userObject;
alert("Newly-constructed URL to be loaded: " + newURL); //CORRECT URL IS CONSTRUCTED BASED ON DEBUGGING OUTPUT!
window.open(newURL,"_self"); //<--THIS IS THE LINE THAT SHOULD INVOKE DOGET(). SERVER LOGS INDICATE DOGET() IS INVOKED, BUT NO PAGE IS VISIBLY SERVED.
}
$("#playerUI").click(function () {
alert("In player UI click...");
var newURL = "?mode=player";
google.script.run.withSuccessHandler(loadNewPage).withUserObject(newURL).getScriptURL();
//Execution continues in loadNewPage callback...
});
$("#holeUI").click(function () {
var newURL = "?mode=hole";
google.script.run.withSuccessHandler(loadNewPage).withUserObject(newURL).getScriptURL();
});
$("#flexUI").click(function () {
var newURL = "?mode=flex";
google.script.run.withSuccessHandler(loadNewPage).withUserObject(newURL).getScriptURL();
});
</script>
和我的Code.gs文件:
function getScriptURL() {
var url = ScriptApp.getService().getUrl();
Logger.log('In getScriptURL...Value of URL returned: ' + url);
return url;
}
function doGet(e) {
Logger.log('In doGet');
Logger.log('query params: ' + Utilities.jsonStringify(e));
if (e.queryString === '') {
Logger.log('Serving loginUI');
return HtmlService
.createHtmlOutputFromFile('loginUI')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setTitle("Please log in");
}
//if here, we know query string is NOT null
if (e.parameter.mode == "player") {
Logger.log('Serving player UI');
return HtmlService
.createHtmlOutputFromFile('playerUI')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setTitle("Following Player");
}
if (e.parameter.mode == "hole") {
Logger.log('Serving hole UI');
return HtmlService
.createHtmlOutputFromFile('holeUI')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setTitle("Following Hole");
}
if (e.parameter.mode == "flex") {
Logger.log('Serving flex UI');
return HtmlService
.createHtmlOutputFromFile('flexUI')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setTitle("Flex Interface");
}
}
我能够通过服务器日志和警报框来验证是否构建了带有查询字符串的正确URL。我希望这行代码:
$("#mainBody").load(newURL);
调用
doGet()
并根据查询字符串加载新页面。但是,通过我的服务器日志,我发现没有调用doGet()
,因此从未提供我希望提供的新页面。怎么了?为什么通过jquery加载新页面时未调用doGet()
?如何强制调用doGet()
?提前致谢! 最佳答案
啊哈!如果您进行更改,以上代码将正常运行
window.open(newURL,"_self");
至
window.open(newURL,"_top");
我不确定为什么必须使用“ _top”,但是在上面的示例代码中,它具有所有不同:使用正确的查询字符串调用doGet(),从而可以提供预期的页面。万岁!这种动态提供新网页的方法提供了模板HTML的强大替代方案。请享用!