0

I am trying to embed a navigation bar written in html and served by google script as the webapp into the google sites page.

The navigation bar works correctly if I use in <A> html attribute TARGET="_blank".

If I use in <A> html attribute TARGET = "_top" the link does not work (clicking it does not seem to result in any browser action).

Console error:

Unsafe attempt to initiate navigation for frame with origin 'https://sites.google.com' from frame with URL 'https://n-rosb5zxog27qlyotjggwwxuzbuy4htzgn74xhia-0lu-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.

Clicking link without any attribute results in link opening in IFRAME (part of embedded google site) with the following error message:

sites.google.com refused to connect

I have revied the following questions:

but they does not seem to answer whether navigating google site is viable threw navigation bar generated in google scripts.

Example: https://sites.google.com/mage.pl/test/strona-g%C5%82%C3%B3wna There is no way to redirect a whole page. None of the applied options works.

Minimal reproductive example:

Code:

function doGet() {
 return HtmlService.createHtmlOutputFromFile("nawigacja.html").setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

Html:

    <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

      /* The navigation menu */
      .navbar {
        overflow: hidden;
        background-color: #ffffff;
      }

      /* Navigation links */
      .navbar a {
        float: left;
        font-size: 16px;
      font-family: arial;
        color: #000000;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      /* The subnavigation menu */
      .subnav {
        float: left;
        overflow: hidden;
      }

      /* Subnav button */
      .subnav .subnavbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: #000000;
        padding: 14px 16px;
        background-color: inherit;
        font-family: arial;
        margin: 0;
      }

      /* Add a red background color to navigation links on hover */
      .navbar a:hover, .subnav:hover .subnavbtn {
        background-color: #dedede;
      }

      /* Style the subnav content - positioned absolute */
      .subnav-content {
        display: none;
        position: absolute;
        left: 0;
        background-color: #dedede;
        width: 100%;
        z-index: 1;
      }

      /* Style the subnav links */
      .subnav-content a {
        float: left;
        color: black;
        text-decoration: none;
      }

      /* Add a grey background color on hover */
      .subnav-content a:hover {
        background-color: #eee;
        color: black;
      }

      /* When you move the mouse over the subnav container, open the subnav content */
      .subnav:hover .subnav-content {
        display: block;
      }

    </style>
  </head>
  <body>

    <!-- Load font awesome icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- The navigation menu -->
      
    <div class="navbar">
      <div class="subnav">
        <button class="subnavbtn">Menu item<i class="fa fa-caret-down"></i></button>
        <div class="subnav-content">
                <a href="https://google.com" TARGET="_blank">Blank</a>
          <a href="https://sites.google.com/" TARGET="_top">Top</a>
          <a href="https://www.google.com" TARGEt="_self">Self</a>
        </div>
      </div>


  </body>
</html>
Abdel5
  • 1,034
  • 3
  • 14
  • 36
  • 1
    Could you provide a [mcve]? `clicking it does not seem to result in any browser action)` Was there a error thrown in the browser console? – TheMaster Nov 16 '21 at 17:03
  • @TheMaster: Please find attached example here: https://sites.google.com/mage.pl/test/strona-g%C5%82%C3%B3wna – Abdel5 Nov 19 '21 at 08:19
  • You didn't answer my question. Show the error in browser console(DevTools>Console). – TheMaster Nov 19 '21 at 08:59
  • @TheMaster: Thanks for patience and help. The post was supplemented with console error. – Abdel5 Nov 19 '21 at 15:56
  • How are you framing it? Provide relevant html of Google sites. Also check the sandbox attributes of ``sandboxframe`` in devtools>Inspector, whether it has `allow-top-navigation-by-user-activation` – TheMaster Nov 19 '21 at 16:01

0 Answers0