Linking to another HTML page in Google Apps Script

问题

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>

回答1:

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.

Code.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>

回答2:

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:

Code.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>

References:

Web apps guide
setChangeHandler

来源：https://stackoverflow.com/questions/15668119/linking-to-another-html-page-in-google-apps-script

标签

html

google-apps-script

web-applications

google-apps-script-web-application