Embeded multi-page App Script in Google Sites

1,594 views
Skip to first unread message

Thomas

unread,
Jul 10, 2020, 10:51:31 AM7/10/20
to Google Apps Script Community
Greetings to the GAS community!

I try to make a little application in App Script with multiple web page (HTML files).
Inside the HTML files, I put some links in order to go from one page to another.
Links are build with the getUrl() function + a parameter ("?page=").
I test this parameter in my doGet() to know the page to return.

I published the App as a Web App and so could access it through given URL (or the dev URL, whatever).
From this URL, if I want to go from on page to another using the links, it works fine !

Then, in order to have a beautiful web page, I created a Google Site.
No problem in embedding my script based on the URL given.
But when I try to click on links, nothing happen.

I tried multiple things (having button with some javascript behind (like window.open(newURL, "_top")) and so on.
Nothing work.

If I go on debug mode, it shows that (as I understand), Google Site is using "_top" for himself. And that the App Script is runing in a iFrame.


But also I found it, I didn't found a way to change the content of the iFrame either.

...
If I try, I get this one :

Unsafe JavaScript attempt to initiate navigation for frame with origin 'https://sites.google.com' from frame with URL 'https://XXX-script.googleusercontent.com/userCodeAppPanel'. The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set. 

And I can't modify the iFrame as it's Google Site that create and manipulate it (not as if it was my own web site).

To be fair, the only things that "works" was window.open(newURL, "_self"). But only one time. And I get this


So, simpe question : what to do (set or anything) to have a working multi-html-pages APP Script embeded in a Google Sites ?

Thanks in advance,

Thomas

Jonathan Butler

unread,
Jul 10, 2020, 12:14:55 PM7/10/20
to google-apps-sc...@googlegroups.com
Have you tried setting the body tag to new html? Make a request to the server using google.script.run and pull html for a different template. Then pass it back and set it on the page. Google is a little weird about html in web requests so I'm not entirely sure if it will work. Maybe convert it to a json object first. This is the first thing I thought of. Let me know if it works for you.

--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/5c462a4d-c426-4e2c-8619-727ea39d2d8ao%40googlegroups.com.

Thomas

unread,
Jul 10, 2020, 5:38:52 PM7/10/20
to Google Apps Script Community
Thank you for you quick answer. This is actually working !

To explain more on this solution : 
on the 'Index' page, I give an id to the body : <body id="body">
on the HTML pages I make a button with an onClick="callHTML('page')". This call a javascript function callHTML(page) with the name of the page I want to recover.

Inside this function callHTML(page), that have to be in the <script> part of the 'Index' page, I make a call to an App Script function recoverHTML(page) :
google.script.run.withSuccessHandler(changeHTML).recoverHTML(page);

App Script recoverHTML(page) is a one line function :
return HtmlService.createTemplateFromFile(page).evaluate().getContent();

Finally, changeHTML() is also a one line function :
$("#body").html(body); (this is jQuery)

And voila !

For this to work with what I made, I have to remove all "<!DOCTYPE html><html><head> ... <body>" from my actual HTML files except 'Index' and change links for button with onClick method.

Pro : I can still evaluate HTML pages ! So I can keep almost all scriptlets I wrote (yeah)
Cons : I have to merge all javascript into 'Index'. And I have only one "<head>". It's not a big deal but still worth mentionning.

P.S. I also thought of having all in one big page an show/hide divs, but I like your answer more.

Thank you ! :)

Thomas
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-community+unsub...@googlegroups.com.

Jonathan Butler

unread,
Jul 11, 2020, 3:18:00 PM7/11/20
to google-apps-sc...@googlegroups.com
Awesome! Glad I could help.

To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/136c801c-2ada-47d8-93b4-d58cf476edeeo%40googlegroups.com.

Brian Mutsetsa

unread,
Dec 14, 2022, 9:12:53 AM12/14/22
to Google Apps Script Community
hello @Thomas. I am facing a similar problem but I don't know exactly where to start. if you can, I'd like to see an example of the full thing so I know where everything starts and ends. 
Reply all
Reply to author
Forward
0 new messages