Linking to another HTML page in Google Apps Script
While the HtmlService allows you to serve HTML, it is not "hosting" pages, and you cannot access the various html files in your Apps Script project by URL directly. Instead, your Web App will have a URL when it is published, and that is the only URL you have.
Here's a way that you can serve separate pages from your script, and have them behave similarly to html file links.
The doGet() function is passed an event when called, and we can take advantage of that to indicate which page we want served. If our Web App ID is <SCRIPTURL>, here is what a URL plus a querystring requesting a specific page will look like:
https://script.google.com/macros/s/<SCRIPTURL>/dev?page=my1
Using templated HTML, we can generate the necessary URL + querystring on the fly. In our doGet(), we just need to parse the querystring to determine which page to serve.
Here's the script, with two sample pages containing buttons to flip between them.
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>
Linking to another html page in google apps script does not seem to work
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>
Linking to another html page in Google Apps Script Not working in sandbox 'IFRAME'
It's a doc error needs to fix with Google when using "SandBoxMode=IFRAME" currently. See Can't call a server function with a form with input type="file" when using SandBoxMode=IFRAME.
I've tested it works now by setting the HtmlService.SandboxMode.NATIVE
instead of working when HtmlService.SandboxMode is set to Iframe. Also reference to this related issue here.
Dynamically changing URL's in an HTML File - Google Apps Scripts / Google Sheets
When you call window.open(), the URL also needs to be enclosed in quotation marks.
let htmlOutput = HtmlService.createHtmlOutput(
"<script type='text/javascript'>" +
"window.open('" + url + "', '_blank');" +
"google.script.host.close();" +
"</script> "
);
Another option would be to pass the URL of your spreadsheet to the HtmlTemplate object as a property:
let template = HtmlService.createTemplateFromFile("popup");
template.url = url;
return SpreadsheetApp.getUi().showDialog(template.evaluate());
Calling evaluate() on an HtmlTemplate object will execute the embedded JS code and place all variables you passed to the template in scope.
popup.html
<body>
Opening your spreadsheet...
<input type='hidden' id="hidden-field" value='<?!= url ?>' />
<script>
var url = document.getElementById("hidden-field").value;
window.open(url, "_blank");
google.script.host.close();
</script>
</body>
Open link in a new webpage from HTML in apps script
Try using this approach:
google.script.run
.withSuccessHandler(function(){
//Go back and access the spreadsheet here
})
.processForm(formObject);
Passing parameters while Linking to another html page in google apps script
I think I know what you want to do. It looks like you are getting the search string parameters from the doGet(e) function on the server side, then you are trying to get the same search string parameters again on the "client side" from the onload function? If this is the case, I would abandon trying to get the search string parameters from the client side.
You could store the search string parameters in the browsers sessionStorage:
window.sessionStorage.setItem("searchStringOne","Value One");
and to retrieve:
var valueOne = window.sessionStorage.getItem("searchStringOne");
Session Storage Information
Related Topics
How to Align Checkboxes and Their Labels Consistently Cross-Browsers
How to Link to Part of a Page - Hash
Table Fixed Header and Scrollable Body
How to Open Link in a New Tab in Html
Percent Pie Chart With CSS Only
Should I Use Px or Rem Value Units in My Css
Default Select Option as Blank
What Does Appending "V=1" to CSS and JavaScript Urls in Link and Script Tags Do
Make a Grid Item Span to the Last Row/Column in Implicit Grid
Make Background Color Extend into Overflow Area
Target="_Blank" Vs. Target="_New"