链接到 Google Apps 脚本中的另一个 HTML 页面
Posted
技术标签:
【中文标题】链接到 Google Apps 脚本中的另一个 HTML 页面【英文标题】：Linking to another HTML page in Google Apps Script 【发布时间】：2013-03-18 01:56:55 【问题描述】：从 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>
【问题讨论】：
前几天我也做了同样的事情，结果渲染的链接href值是script.google.com/legend.html，这当然是错误的。我最终使用了 googledrive.com/host/"Public 文件夹 ID"/legend.html 方法并链接到该文件。这对我来说没问题，因为我不需要在链接页面上运行任何代码，只需显示一些信息。 【参考方案1】：虽然 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() 中，我们只需要解析查询字符串来确定要服务的页面。
这是脚本，有两个示例页面，其中包含在它们之间切换的按钮。
代码.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
<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
<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>
【讨论】：
这很脏......同时也很漂亮。至少它正在工作。 我确实复制并粘贴了您的代码，在这里我得到了结果：拒绝在框架中显示“script.google.com/a/vngates.vn/macros/s/…”，因为它将“X-Frame-Options”设置为“sameorigin”。 为我的上述错误找到了解决方案：你应该把它添加到 my1.html 和 my.htmlSource = my1.html
这可能是一个愚蠢的问题...在我的 html 中，我粘贴了 。在我的页面上， 部分实际显示，旁边有按钮，但它指向 400 错误，因为 无法解析。为什么显示，而不是调用函数？ 重要的一点：这个code.gs仍然需要developers.google.com/apps-script/guides/html/best-practices的include函数【参考方案2】：Google Apps 脚本 web-app 主要设计用于单页 web-app 应用程序，具有动态页面。但它也可以用作多页应用程序（不推荐）。这是一个示例网络应用程序，它使用更改处理程序使用 url 哈希片段获取网页（与上一个答案中的模板相反）。
代码.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
<h3>This is Page 1</h3>
<p>Hello World!</p>
page2.html
<h4>This is Page2</h4>
<p>Goodbye World!</p>
index.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>
参考资料：
Web apps guide setChangeHandler【讨论】：
以上是关于链接到 Google Apps 脚本中的另一个 HTML 页面的主要内容，如果未能解决你的问题，请参考以下文章