Google Apps脚本中的多页网站:如何通过jquery或javascript调用doGet()? [英] Multi-page site in Google Apps Script: How to invoke doGet() through jquery or javascript?
问题描述
我想使用Google Apps脚本构建多页网站.为此，我想利用doGet()处理查询字符串的能力.我知道至少有一个解决此问题的方法:
I want to build multi-page sites using Google Apps Script. To do this, I would like to exploit the ability of doGet() to process query strings. I am aware of at least one solution to this problem:
但是，该解决方案似乎过于严格，因为它依赖于GAS的模板化的html功能以在页面加载时直接在HTML内用查询字符串构建正确的URL.更具通用性的解决方案是基于动态UI状态和用户界面操作在jquery(或javascript)函数中构建适当的查询字符串.这可能吗?怎么做到呢?
However, that solution seems overly restrictive, since it relies on GAS's templated html feature to build the proper URL with query string right within the HTML at page load-time. A more general-purpose solution would be to build the appropriate query string within a jquery (or javascript) function based on dynamic UI state and user interface actions. Is this possible? How can it be done?
这是我对可能的解决方案的建议(无效)！
Here is my proposal for a possible solution (which doesn't work!):
HTML/JQuery:
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文件:
And my Code.gs file:
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.我希望这行代码:
I am able to verify, through server logs and alert boxes, that the correct URL with query string is built. I would expect this line of code:
$("#mainBody").load(newURL);
调用doGet()并导致基于查询字符串加载新页面.但是，通过我的服务器日志，我发现没有调用doGet()，因此从未提供我希望提供的新页面.怎么了?为什么通过jquery加载新页面时未调用doGet()?如何强制调用doGet()?预先感谢！
to invoke doGet() and cause a new page to be loaded based on the query string. However, through my server logs, I observe that doGet() is not invoked, and hence the new page I expect to be served is never served. What is happening? Why is doGet() not invoked when I load a new page through jquery? How can I force doGet() to be invoked? Thanks in advance!
推荐答案
啊！如果您进行更改，上面的代码 将正常工作
Aha! The above code will work properly if you change
window.open(newURL,"_self");
到
window.open(newURL,"_top");
我不确定为什么必须使用"_top"，但是在上面的示例代码中，它具有所有不同:使用正确的查询字符串调用doGet()，从而可以提供预期的页面.万岁！这种动态提供新网页的方法为模板化HTML提供了一种强大的替代方法.享受吧！
I am not sure why "_top" is necessary, but in the example code above, it makes all the difference: doGet() is invoked with the proper query string, resulting in the expected page being served. Hooray! This approach to serving new web pages on the fly provides a powerful alternative to templated HTML. Enjoy!
这篇关于Google Apps脚本中的多页网站:如何通过jquery或javascript调用doGet()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
