Search code examples
htmlgoogle-apps-scriptweb-applications

Linking to another html page in google apps script does not seem to work

I have tried the answer provided for linking to another html page in google apps script, but it will not go back to page my1, I get a blank screen. In fact, I tried to expand it by adding a third page, my3 and having two buttons on each page...

example:

my1.html has buttons "my2" & "my3"

my2.html has buttons "my1" & "my3"

my3.html has buttons "my1" & "my2"

From my1, I can go to either my2 or my3, however from either my2 or my3, pressing any button, I get a blank screen and when refreshed, end up back at my1...

Thank you.

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

<!DOCTYPE html>
<html>
  <body>
    <h1>Source = my1.html</h1>
    <?var url = getScriptUrl();?><a href='<?=url?>?page=my2.html'> <input type='button' name='button' value='my2.html'></a>
    <?var url = getScriptUrl();?><a href='<?=url?>?page=my3.html'> <input type='button' name='button' value='my3.html'></a>
  </body>
</html>

my2.html

<!DOCTYPE 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>
    <?var url = getScriptUrl();?><a href='<?=url?>?page=my3'> <input type='button' name='button' value='my3.html'></a>
  </body>
</html>

my3.html

<!DOCTYPE html>
<html>
  <body>
    <h1>Source = my3.html</h1>
    <?var url = getScriptUrl();?><a href='<?=url?>?page=my1'> <input type='button' name='button' value='my1.html'></a>
    <?var url = getScriptUrl();?><a href='<?=url?>?page=my2'> <input type='button' name='button' value='my2.html'></a>
  </body>
</html>
Solution

  • Set the sandbox mode to IFRAME:

    function doGet(e) {
  //Logger.log( Utilities.jsonStringify(e) );
  Logger.log(e.parameter.page);
  var pgToLoad = e.parameter.page;

  if (!e.parameter.page) {
    Logger.log('!e.parameter.page')
    // When no specific page requested, return "home page"
    return HtmlService.createTemplateFromFile('my1').evaluate()
       .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  }
  Logger.log('there is something for the page');
  // else, use page parameter to pick an html file from the script
  return HtmlService.createTemplateFromFile(pgToLoad).evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

    Add:

    <head>
  <base target="_top">
</head>

    To all your pages, and it will work.

    my1.html

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Source = my1.html</h1>
    <?var url = getScriptUrl();?><a href='<?=url?>?page=my2.html'> <input type='button' name='button' value='my2.html'></a>
    <?var url = getScriptUrl();?><a href='<?=url?>?page=my3.html'> <input type='button' name='button' value='my3.html'></a>
  </body>
</html>