web-dev-qa-db-fra.com

Lien vers une autre page HTML dans le script Google Apps

Lors de la liaison de ScriptDbConsole.html à legend.html, j'obtiens le message d'erreur suivant:

Désolé, le fichier que vous avez demandé n'existe pas. Veuillez vérifier l'adresse et réessayer.

Cela fonctionnerait normalement dans un environnement normal, mais pas ici, je suppose. C'est dans script.google.com.

Lors de la création d'un nouveau fichier .html dans le projet script.google.com, il le crée au même emplacement que pour les autres, donc ce code devrait en fait fonctionner correctement? Comment puis-je ouvrir legend.html à partir de ScriptDbConsole.html?

<a href='legend.html' target='_blank'>Open in new window</a>
htmlgoogle-apps-scriptweb-applicationsgoogle-apps-script-web-application
20
MOTIVECODEX

Bien que HtmlService vous permette de servir du HTML, il ne s'agit pas "d'héberger" des pages, et vous ne pouvez pas accéder directement aux URL des différents fichiers html de votre projet Apps Script. Au lieu de cela, votre application Web aura une URL lors de sa publication, et c'est la seule URL dont vous disposez.

Voici une façon de servir des pages distinctes de votre script et de les faire se comporter de la même manière que les liens de fichiers html.

La fonction doGet() reçoit un événement lorsqu'elle est appelée, et nous pouvons en profiter pour indiquer la page que nous voulons afficher. Si notre ID d'application Web est <SCRIPTURL>, Voici à quoi ressemblera une URL et une chaîne de requête demandant une page spécifique:

https://script.google.com/macros/s/<SCRIPTURL>/dev?page=my1

À l'aide de modèles HTML, nous pouvons générer l'URL + la chaîne de requête nécessaires à la volée. Dans notre doGet(), nous avons juste besoin d'analyser la chaîne de requête pour déterminer la page à diffuser.

Voici le script, avec deux exemples de pages contenant des boutons pour basculer entre eux.

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>
43
Mogsdad

L'application Web de script d'applications Google est principalement conçue pour être utilisée avec une application Web d'application d'une seule page. Mais il peut également être utilisé comme une application de plusieurs pages (non recommandé). Voici un exemple d'application Web:

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>

Références:

1
TheMaster