Login/Register
Can't have link in Embedded web app in Google site?
Asked Answered
Solved htmlgoogle-apps-scriptgoogle-sites
H

2

9

I'm trying to integrate a google script app deployed as a web app in a Google Site. The embedding feature works well and all seems good at first. But for some reason links don't work in the embedded view. I can't find any specific topics about this.

Google Script web app can be embedded everywhere I tried except in Google Site. And Google Site can embed every site that allow it except web app from google script.

EDIT (2)

Turn out the problem can be resolved pretty quickly :

  1. Open https://sites.google.com and create a new site

  2. Insert an "embed" choose the "embed code" option and copy paste this code :

    <!DOCTYPE html>
<html>
 <body>
   <div>
     <a href="http://google.com">Click Me!</a>
   </div>
 </body>
</html>

  3. Now testing on preview or once the site publish the link can't be clicked

Hartzel answered 27/5, 2020 at 9:11 Comment(14)
How do you have the link? Using a link with target="_blank" opens the link in another window: <p><a href="link" target="_blank">The link</a></p> – Thoroughpaced
Don't work eigther. Links dont work like if they get they js .click() method rewrited to do nothing. – Hartzel
Show errors in the chrome dev console – Virus
Well that is he funny part, my compagny desactivate the navigator dev tool.... – Hartzel
Can you share the code or set up a reproducible example to see how are you doing it? – Thoroughpaced
Well i did @Kessy. you can take the code from the official google app script doc here : developers.google.com/apps-script/guides/html/… hten follow this: developers.google.com/apps-script/guides/… and then this : developers.google.com/apps-script/guides/… – Hartzel
Use XFrameOptionsMode by changing the setSandboxMode for .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); – Thoroughpaced
I already try it. It dont seem like it chnage anything – Hartzel
Show exact steps you did to embed the app in Google sites preferably with screenshots. – Virus
@Virus I edited it to make it more clear. Unfortunatly i'm unable to upload screenshots due to my compagnie policy. – Hartzel
Does _blank work? and is it enough for you? The allow-top-navigation sandbox attribute is missing from Google sites embed feature. Therefore , I believe _top won't work. – Virus
It was like that in the google documentation, i forget to remove it. I use to dont put any target. But good news now i try to put target="_self" even if it suppose to be implicite and it seem to work :) – Hartzel
It's google site embedding that want the target attibut to be specified other way they disable links aparently... – Hartzel
I guess you lead me on the solution @TheMaster. Make an answer so i can validate it if you want – Hartzel
H
6

You have to specified the target propriety. Google script dont apply it by default so use this code :

<!DOCTYPE html>
<html>
 <body>
   <div>
     <a target="_self" href="http://google.com">Click Me!</a>
   </div>
 </body>
</html>
Hartzel answered 3/6, 2020 at 12:51 Comment(1)
In the other hand if you do that in you Web app from GAS it dont work in the div preview – Hartzel
T
0

FYI: I tried target="_self" and could not get it to work. The below is currently working for me. In our use we have the text link and an image as an icon for the href. Please note the scriplet is the URL. target="_blank" and with rel="noopener noreferrer" seems to have made the difference. I didn't delve too far into why but this article seemed to proved better explanation than other documentation I reviewed: https://pointjupiter.com/what-noopener-noreferrer-nofollow-explained/

<a target="_blank" href=<?=edGoogleDriveId?>><img src='google-drive.png'   alt="Google Drive icon" rel="noopener noreferrer" class='icon';/>Employee folder</a>
Tuttifrutti answered 31/1, 2022 at 21:12 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.