Search code examples
javascripthtmlgoogle-apps-scriptweb-applications

Can't Navigate HTML Page through Web App (Google Apps Script)

I've created a simple Google Apps Script web app with multiple pages (index.html, about.html). The index.html page loads fine after deploying the web app. However, when I click on the "About Us" link, the page goes blank even though the URL updates correctly.

Code.gs

function doGet(e) {
  Logger.log('doGet function called');
  var params = e && e.parameter || {};
  var page = params.page || 'index';
  
  Logger.log('Page: ' + page);
  
  var html = HtmlService.createHtmlOutputFromFile(page);
  Logger.log('HTML output: ' + html.getContent());
  
  if (page === 'about') {
    Logger.log('About page loaded');
  }
  
  return html;
}

index.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Home Page</h1>
    <ul>
      <li><a href="?page=about" target="_top">About Us</a></li>
      <li><a href="?page=new-reg">New Registration</a></li>
      <li><a href="?page=investor">Investor Login</a></li>
    </ul>
  </body>
</html>

about.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>About Us</h1>
    <p>This is the about page.</p>
    <ul>
      <li><a href="?page=index">Home</a></li>
      <li><a href="?page=new-reg">New Registration</a></li>
      <li><a href="?page=investor">Investor Login</a></li>
    </ul>
  </body>
</html>

Issue:

What I've tried:

  • Cleared browser cache.
  • Tried incognito mode.

Additional Info:

If I manually type the query string into the original deployment URL, it works: https://script.google.com/macros/s/AKfycbzitC6_N2hdCkcRQldH_7guyJ6p-FczxSBt5-OR-jdT/dev?page=about

Why does the page go blank when clicking the link, and how can I fix it?

Solution

  • Modification points:

    • About Why does the page go blank when clicking the link, from Clicking the "About Us" link updates the URL to something like this: https://n-7zf3tmc56mjeqj3iwdea76zqxnq3d3a232oifby-0lu-script.googleusercontent.com/userCodeAppPanel?page=about The page goes blank instead of loading the about.html content., in the case of href="?page=about", the URL becomes the redirected URL. In this case, I think that the original URL is required. From https://script.google.com/macros/s/AKfycbzitC6_N2hdCkcRQldH_7guyJ6p-FczxSBt5-OR-jdT/dev?page=about, how about using https://script.google.com/macros/s/###/dev instead of https://n-7zf3tmc56mjeqj3iwde,,,?

    When this is reflected in your showing script, how about the following modification?

    code.gs

    function doGet(e) {
  Logger.log('doGet function called');
  var params = e && e.parameter || {};
  var page = params.page || 'index';

  Logger.log('Page: ' + page);

  var html = HtmlService.createTemplateFromFile(page);
  html.url = ScriptApp.getService().getUrl();
  var evaluatedHtml = html.evaluate();
  Logger.log('HTML output: ' + evaluatedHtml.getContent());

  if (page === 'about') {
    Logger.log('About page loaded');
  }

  return evaluatedHtml;
}

    index.html

    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Home Page</h1>
    <ul>
      <li><a href="<?!= url ?>?page=about" target="_top">About Us</a></li>
      <li><a href="<?!= url ?>?page=new-reg">New Registration</a></li>
      <li><a href="<?!= url ?>?page=investor">Investor Login</a></li>
    </ul>
  </body>
</html>

    about.html

    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>About Us</h1>
    <p>This is the about page.</p>
    <ul>
      <li><a href="<?!= url ?>?page=index">Home</a></li>
      <li><a href="<?!= url ?>?page=new-reg">New Registration</a></li>
      <li><a href="<?!= url ?>?page=investor">Investor Login</a></li>
    </ul>
  </body>
</html>
    • By this modification, when you click "About Us", the URL of {web apps URL}?page=about is used.

    Note:

    • If you use the endpoint of exec, please reflect the latest script to the Web Apps.

    Reference: