Menu
When linking from ScriptDbConsole.html to legend.html I get the following error message:
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.
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?
<a href='legend.html' target='_blank'>Open in new window</a> 
810
To add an HTML file to your Apps Script project, open the Script Editor and choose File > New > HTML File. Within the HTML file, you can write most standard HTML, CSS, and client-side JavaScript. The page will be served as HTML5, although some advanced features of HTML5 are not available, as explained in Restrictions.
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.
Here's a way that you can serve separate pages from your script, and have them behave similarly to html file links.
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:
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.
Here's the script, with two sample pages containing buttons to flip between them.
/** * 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 script web-app is primarily designed to be used a single page web-app application, with dynamic pages. But it can be also used as a multiple page application(not recommended). Here's a sample web-app, which uses the change handler to get web pages using the url hash fragment(as opposed to templates in the previous answer).
//@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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
