MOT*_*DEX 19 html web-applications google-apps-script google-apps-script-web-application
从ScriptDbConsole.html链接到legend.html时,我收到以下错误消息:
抱歉,您请求的文件不存在.请检查地址并再试一次.
这通常适用于正常环境,但我猜这里不行.它位于script.google.com中.
在script.google.com项目中创建一个新的.html文件时,它会在与其他文件相同的位置创建它,所以这段代码实际上应该正常工作吗？如何从ScriptDbConsole.html打开legend.html？
<a href='legend.html' target='_blank'>Open in new window</a>
Mog*_*dad 43
虽然HtmlService允许您提供HTML,但它不是"托管"页面,并且您无法通过URL直接访问Apps脚本项目中的各种html文件.相反,您的Web应用程序在发布时将具有URL,这是您拥有的唯一URL.
这是一种可以从脚本中提供单独页面的方法,并使它们的行为与html文件链接类似.
该doGet()函数在被调用时传递一个事件,我们可以利用它来指示我们想要服务的页面.如果我们的Web App ID是<SCRIPTURL>,那么URL和请求特定页面的查询字符串将如下所示:
https://script.google.com/macros/s/<SCRIPTURL>/dev?page=my1
使用模板化HTML,我们可以动态生成必要的URL +查询字符串.在我们中doGet(),我们只需要解析查询字符串以确定要服务的页面.
这是脚本,有两个示例页面,包含在它们之间翻转的按钮.
/**
* 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();
}
<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>
<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>
Google Apps 脚本 Web 应用程序主要设计用于具有动态页面的单页 Web 应用程序应用程序。但它也可以用作多页面应用程序（不推荐）。这是一个示例 Web 应用程序，它使用更改处理程序来使用 url 哈希片段获取网页（而不是前面答案中的模板）。
//@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')
}
<h3>This is Page 1</h3>
<p>Hello World!</p>
<h4>This is Page2</h4>
<p>Goodbye World!</p>
<!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>