在 Google Apps 脚本中链接到另一个 HTML 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15668119/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Linking to another HTML page in Google Apps Script
提问by MOTIVECODEX
When linking from ScriptDbConsole.html to legend.html I get the following error message:
从 ScriptDbConsole.html 链接到 legend.html 时，我收到以下错误消息：
Sorry, the file you have requested does not exist. Please check the address and try again.
抱歉，您请求的文件不存在。请检查地址，然后再试一次。
This would normally work in a normal environment, but not here I guess. It's in script.google.com.
这通常会在正常环境中工作，但我猜在这里不行。它在 script.google.com 中。
When creating a new .html file in script.google.com project, it creates it at the same location as it did for the others, so this code should actually work right? How can I open legend.html from ScriptDbConsole.html?
在 script.google.com 项目中创建新的 .html 文件时，它会在与其他文件相同的位置创建它，所以这段代码实际上应该可以正常工作吗？如何从 ScriptDbConsole.html 打开legend.html？
<a href='legend.html' target='_blank'>Open in new window</a>
回答by Mogsdad
While the HtmlService allows you to serve HTML, it is not "hosting" pages, and you cannot access the various html files in your Apps Script project by URL directly. Instead, your Web App will have a URL when it is published, and that is the only URL you have.
虽然 HtmlService 允许您提供 HTML，但它不是“托管”页面，您无法直接通过 URL 访问 Apps Script 项目中的各种 html 文件。相反，您的 Web 应用程序在发布时将有一个 URL，这是您拥有的唯一 URL。
Here's a way that you can serve separate pages from your script, and have them behave similarly to html file links.
这是一种可以从脚本中提供单独页面的方法，并使它们的行为类似于 html 文件链接。
The doGet()function is passed an event when called, and we can take advantage of that to indicate which page we want served. If our Web App ID is <SCRIPTURL>, here is what a URL plus a querystring requesting a specific page will look like:
该doGet()函数在调用时会传递一个事件，我们可以利用它来指示我们想要提供哪个页面。如果我们的 Web App ID 是<SCRIPTURL>，则 URL 加上请求特定页面的查询字符串将如下所示：
https://script.google.com/macros/s/<SCRIPTURL>/dev?page=my1
Using templated HTML, we can generate the necessary URL + querystring on the fly. In our doGet(), we just need to parse the querystring to determine which page to serve.
使用模板化的 HTML，我们可以即时生成必要的 URL + 查询字符串。在我们的 中doGet()，我们只需要解析查询字符串以确定要提供的页面。
Here's the script, with two sample pages containing buttons to flip between them.
这是脚本，其中包含两个示例页面，其中包含可在它们之间切换的按钮。
Code.gs
代码.gs
/**
* Get the URL for the Google Apps Script running as a WebApp.
*/
function getScriptUrl() {
var url = ScriptApp.getService().getUrl();
return url;
}
/**
* Get "home page", or a requested page.
* Expects a 'page' parameter in querystring.
*
* @param {event} e Event passed to doGet, with querystring
* @returns {String/html} Html to be served
*/
function doGet(e) {
Logger.log( Utilities.jsonStringify(e) );
if (!e.parameter.page) {
// When no specific page requested, return "home page"
return HtmlService.createTemplateFromFile('my1').evaluate();
}
// else, use page parameter to pick an html file from the script
return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate();
}
my1.html
我的1.html
<html>
<body>
<h1>Source = my1.html</h1>
<?var url = getScriptUrl();?><a href='<?=url?>?page=my2'> <input type='button' name='button' value='my2.html'></a>
</body>
</html>
my2.html
我的2.html
<html>
<body>
<h1>Source = my2.html</h1>
<?var url = getScriptUrl();?><a href='<?=url?>?page=my1'> <input type='button' name='button' value='my1.html'></a>
</body>
</html>
回答by TheMaster
Google apps script web-app is primarily designed to be used a single page web-app application. But it can be also used as a multiple page application(not recommended). Here's a sample web-app:
Google 应用程序脚本网络应用程序主要设计用于单页网络应用程序应用程序。但它也可以用作多页面应用程序（不推荐）。这是一个示例网络应用程序：
Code.gs:
代码.gs：
//@return Base Url
function getUrl() {
return ScriptApp.getService().getUrl()
}
//@return Html page raw content string
function getHtml(hash) {
return HtmlService.createHtmlOutputFromFile(hash).getContent()
}
//@return provided page in the urlquery '?page=[PAGEID]' or main index page
function doGet(e) {
var page = e.parameter.page
return HtmlService.createHtmlOutputFromFile(page || 'index')
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setTitle('App Demo')
}
page1.html
页面1.html
<h3>This is Page 1</h3>
<p>Hello World!</p>
page2.html
page2.html
<h4>This is Page2</h4>
<p>Goodbye World!</p>
index.html
索引.html
<!DOCTYPE html>
<html>
<head>
<base target="_top" />
<title>Single Page App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
h1 {
text-align: center;
margin: 2px;
text-transform: uppercase;
background-color: green;
}
span:hover,
a:hover {
background-color: yellowgreen;
}
body {
background-color: brown;
color: white;
font-size: 2em;
}
a:visited {
color: white;
}
</style>
</head>
<body>
<h1><span id="type">Single</span> Page App Demo</h1>
<div id="main">Loading...</div>
<script>
//Change base url
google.script.run
.withSuccessHandler(url => {
$('base').attr('href', url)
})
.getUrl()
//Function to handle hash change
function change(e) {
let hash = e.location.hash
if (!hash) {
main()
return
}
google.script.run
.withSuccessHandler(htmlFragment => {
$('#main').html(htmlFragment)
})
.getHtml(hash)
}
google.script.history.setChangeHandler(change)
//Function to add Main page html
function main() {
$('#main').html(`
<ul>
<li><a href="#page1">Page1</a></li>
<li><a href="#page2">Page2</a></li>
</ul>`)
}
//Loads Main html from main function
//Adds toggle to span to change to a Multiple page app
$(() => {
main()
$('#type').on('click', () => {
let hf = $('a').attr('href')
if (!hf) return
hf = hf.indexOf('#') + 1
$('#type').text(hf ? 'Multiple' : 'Single')
$('a').each((i, el) => {
$(el).attr('href', (i, v) =>
hf ? '?page=' + v.slice(1) : '#' + v.slice(6)
)
})
})
})
</script>
</body>
</html>
