Custom buttons in new Google Sites

Question

I tried to implement customized buttons on my website lately, using Google Sites, just to do a basic function: scroll to a section or to top. Didn't know that it would be so difficult...

I had to use Embed code to add my buttons (can't customize them otherwise) but this makes them displayed in an iframe.

An onclick with window.top didn't seem to work at all (or maybe I did it wrong).

My temporary solution is the following but it opens a new tab before scrolling so it's not so great :

.button-test {
  background-color: #0078d0;
  border: 0;
  border-radius: 56px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: system-ui, -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  font-size: 18px;
  font-weight: 600;
  outline: 0;
  padding: 16px 21px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-test:before {
  background-color: initial;
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  border-radius: 125px;
  content: "";
  height: 50%;
  left: 4%;
  opacity: .5;
  position: absolute;
  top: 0;
  transition: all .3s;
  width: 92%;
}

.button-test:hover {
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .button-test {
    padding: 16px 48px;
  }
}

<a href="http://test.com/en#h.2f00a9eddc84963_56">
  <button class="button-test" role="button">Test Button</button>
</a>

Couldn't find a function or script that makes the main/top window refresh without opening a new tab to scroll to the section. Has anyone found a solution for this? I really hope so... I don't understand why Google Sites is so limited.

Here's an example: sites.google.com/view/testcustombutton

From my understanding, it has something to do with the sandbox iframe automatically generated not having the allow-top-navigation option. Is there a way to change or bypass that?

Answer 1

Suggestion #1 - iframes and messaging

Since your buttons are within an iframe, you need to pass the data to the parent, and you need to do it in a specific way, to avoid CORS issues (more on that later). Now, depending on how deep your iframe-inception goes, this might turn unwieldy very soon (one iframe has an iframe for a parent, which is itself a child of another iframe, and so on, up the family tree, until we reach the parent document).

In the simplest case (iframe having only one parent), this might do. Be advised, however, that is not the most advisable way to go about it, for security reasons.

In the iframe:

const myBtn = document.getElementById("myBtn");
myBtn.on("click",handleScroll);

// This is the part which communicates with the main / parent window
function handleScroll() {
    window.parent.postMessage({message: <your_message>, secret: "trustMeBro"}, "*");
}

Some explanations for things done so far:

• we use window.parent.postMessage to avoid cross-origin issues, and to let the info flow back to the parent document from its iframe. We couldn't allow the button click from within the iframe to have any effect on the parent document otherwise
• first argument (JSON) of window.parent.postMessage(...) is a JSON, which contains both the message (message key and its value), and the secret (secret key and its value). The message is what the name suggests - an actual message for our parent document. In your case, this would be the anchored link you want your document to scroll to. The secret is your way of identifying yourself to your parent. This is not the best way to go about it, since someone could inject various nonsense to your parent page. For a better way of doing it, refer to the MDN documentation
• the previous ties in with the last argument - "*" . This is the origin of the message. As the MDN documentation states:

Always provide a specific targetOrigin, not *, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site.

Why did I set it to "*", then? Because my test cases were in localhost. For your specific case, you would set the origin to the URL of your actual location of your iframe file.

Moving on to the parent. Your main page / parent page should have this, in order to be able work with what we already have in your iframe *.html file.

window.addEventListener("message", function(event) {
    // let's see what we're getting
    console.log(event);
    console.log(event.origin);
    console.log(event.originalTarget);
    console.log(event.explicitOriginalTarget);
    if(event.data.secret === "trustMeBro") {
        // do stuff, scroll, change HTML in the parent document, etc
        console.log(event.data.message);
       // do more stuff
    }
});

If we're expecting messages from the outside, we need to attach an event listener for that. Before you do anything based on the received data, you should first have only console.logging of the information you received when the message event was triggered. Based on that (and experimentation) you'll build your later logic.

If you have a relay of iframes, all passing data between one another, until the message reaches the parent window, you're not doing things right.

---

Suggestion #2 - cookies and setInterval

Another way of handling the issue you're having is by employing cookies. This has its own problems - depending on where you are, you might have to give the users the opt-out when it comes to cookie use, and then this solution breaks the functionality of your website.

That being said, here's the code for the iframe. The entire suggestion assumes that all of your *.html files are in the same directory on your website.

const myBtn = document.getElementById("myBtn");
myBtn.on("click",setCookie);

// This is the part which communicates with the main / parent window
function setCookie() {
    var cookieName = <cookie_name>;
    var cookieValue = <your_message_to_parent>;
    var expiresSeconds = <cookie_expiration_in_seconds>;
    var d = new Date();
    d.setTime(d.getTime() + (expiresSeconds*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = 
        cookieName + "=" 
        + cookieValue + ";" 
        + expires 
        + ";path=/;secure;httponly;domain=<your_domain>;SameSite=Strict";
}

Explanations:

• when your iframe button is clicked, this will set a cookie with a specific name - for example, btnscroll (or any other, you can name it whatever you like)
• the value of the cookie should be your message to the parent window - what should it do. In your case, that would be scrolling, if that particular button was clicked
• the cookie also needs to have an expiration date - if you're just handling simple things, like scrolling the parent, then the cookie should not be set to expire 10 years from now
• for everything else in the document.cookie part (path, secure, etc), please refer to the MDN documentation

Let's see what we need to change in the parent.

var scrollInterval = setInterval(function() {
    let cookieVal = checkForCookie(<cookie_name>); // the name that was set in your iframe
    // do stuff based on what the cookieVal is
},500);

function checkForCookie(cookie) {
    // let's get all of the cookies
    let cookies = document.cookie;
    // let's see what we have
    console.log(cookies);
    // ah, so the semicolon can be used
    // to split this long string into an array
    let cookieArray = cookies.split(';');
    // let's check the array
    console.log(cookieArray);
    // good, now we just have to loop through
    // but let's eliminate the empty spaces around
    // cookie=value elements of our array
    cookieArray.map(function(a) {
        return a.trim();
    });
    
    for(let i = 0; i < cookieArray.length; i++) {
        if(cookieArray[i].indexOf(cookie + '=') > -1) {
            let ourCookieArr = cookieArray[i].split(cookie + '=');
            // let's see what we have
            console.log(ourCookieArr);
            // ok, let's get the second element, and clear the cookie
            deleteCookie(cookie);
            return ourCookieArr[1];
        }
    }

    // no cookie found
    return false;
}

function deleteCookie(cookie) {
    // we're setting it to an empty string
    // which expires in the past
    document.cookie = 
        cookie + "=" 
        + ";" 
        + "Expires=Thu, 01 Jan 1970 00:00:01 GMT;"
        + "path=/;secure;httponly;domain=<your_domain>;SameSite=Strict";
}

This solution isn't the greatest, as well, because you're the constantly running the background checks if the cookie is set, and by doing that you're pestering the client's browser to check for something that happens occasionally (button click for scrolling).

---

The takeaway - there are ways to do what you need, but, when possible, you should avoid working with iframes. Organize your content differently, or change hosts / platforms, if that's not possible.