JBruce JBruce - 1 month ago 7
HTML Question

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>

Answer

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>