How to give link to html file in google app script

Question

I have multiple html files in my script project.I want to link different html files using the anchor tag.Like a href="link to another html file in the same app script project". How do i achieve this? The file must reload on the same window.

Answer 1

Assuming the app is served via HtmlService, we can use script runners to retrieve new html from the project files. Content is just removed / added to existing elements while toggling their visibility in the single page app instead the browser doing an actual window reload.

If you don't need the "pages" to be reloaded when they are clicked, you can just load all the html upfront instead.

Sample code

Live demo

Answer 2

1. Suppose there is page1(html file) and page2(html file). Change the Code.gs as follows:

   function doGet(e) {
       Logger.log( Utilities.jsonStringify(e) );
       if (!e.parameter.page) {
           return HtmlService.createTemplateFromFile('page1').evaluate();
       }
       return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate();
   }
   
   
   function getScriptUrl() {
       var url = ScriptApp.getService().getUrl();
       return url;
   }
   

2. Add <base target="_top"> tag to every html file.

3. Linking to another html from html will be possible in a follwing way:

   <?var url = getScriptUrl();?>window.top.location.href = '<?!=url?>?page=page2';

   or

   <?var url = getScriptUrl();?><a href = '<?!=url?>?page=page2'>Jump to page2</a>

See here for more information.