My WebApp URL is this:
https://script.google.com/macros/s/[Deployment ID]/exec
It shows the form correctly. I have a button on top of this form to come back to home page. It only has to add ?page=home to the above url. But when I click that button URL is shown as following:
https://n-f22j6yycycwkqttwlgfk5eezyixnbwfyfih4bba-0lu-script.googleusercontent.com/userCodeAppPanel?page=home
So last parameter part is what I have expected with my webapp url, not with this:
...script.googleusercontent.com/userCodeAppPanel
which I do not understand so far.
What is userCodeAppPanel?
How to solve this problem?
I tried to create sample project for similar webapp with only three pages. But when I deployed I get other problem - not the above one. So I guess the question also should be changed now.I did change the question. New question is : Google WebApp URL if changed manually is working but via button href not working. Why?
GS doGet function: Within doGet i have following -
var html = doGetPageOrIndex(e);
return html;
function doGetPageOrIndex(e){
var page = e.parameter.page
return HtmlService.createHtmlOutputFromFile(page || 'index2')
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setTitle('App Demo')
}
HTML page1
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h3>Heading Page 1</h3>
<p>Thanks Man</p>
</body>
</html>
HTML page2
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h4>Your Page2</h4>
<p>You are welcome!</p>
</body>
</html>
This demo is being copied from another user of stackoverflow.
here is Index2 HTML page code:
<!DOCTYPE html>
<html>
<head>
<base target="_top" />
<title>Single Page App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
h1 {
text-align: center;
margin: 2px;
text-transform: uppercase;
background-color: blue;
}
span:hover,
a:hover {
background-color: yellowgreen;
}
body {
background-color: brown;
color: white;
font-size: 2em;
}
a:visited {
color: white;
}
</style>
</head>
<body>
<h1><span id="type">Multi</span> Page App </h1>
<div id="main">Loading...</div>
<script>
//Change base url
google.script.run
.withSuccessHandler(url => {
$('base').attr('href', url)
})
.getUrl()
//Function to handle hash change
function change(e) {
let hash = e.location.hash
if (!hash) {
main()
return
}
google.script.run
.withSuccessHandler(htmlFragment => {
$('#main').html(htmlFragment)
})
.getHtml(hash)
}
google.script.history.setChangeHandler(change)
//Function to add Main page html
function main() {
$('#main').html(`
<ul>
<li><a href="#page1">Page1</a></li>
<li><a href="#page2">Page2</a></li>
</ul>`)
}
//Loads Main html from main function
//Adds toggle to span to change to a Multiple page app
$(() => {
main()
$('#type').on('click', () => {
let hf = $('a').attr('href')
if (!hf) return
hf = hf.indexOf('#') + 1
$('#type').text(hf ? 'Multiple' : 'Single')
$('a').each((i, el) => {
$(el).attr('href', (i, v) =>
hf ? '?page=' + v.slice(1) : '#' + v.slice(6)
)
})
})
})
</script>
</body>
</html>
If I edit the URL manually and use following and then enter - I will get target page without problem. https://script.google.com/a/macros/5times.co.in/s/AKfycbyY7gR13A1C7a7SVtbYnCy_2TiMeeZWM1ggW134GMKTHOwLvjfnJsGEmtzSgYQmLLIsbQ/exec#page2
But If I use the home page and then click page1 or page2 link then nothing happen to the page. Even though the URL is correctly changed as expected. This is confusing to me. If I edit the URL again and change page1 to page2 and then enter it will work. So why it is not loading page1/2 when I click the page1/2 link on main page?
All the codes are copied above. Thank for your effort in advance.
