Retrieve URL of AppScript using Javascript

Question

I am trying to reload the current page with a new parameter, but I am unable to retrieve the correct URL of the webpage. I am getting an alternate URL instead of the one that triggers the web app

https://script.google.com/a/user/macros/s/A...ljhGC/dev?action=menu&id=1

when the button is clicked I want the action parameter's value to change and the page to reload as

https://script.google.com/a/user/macros/s/A...ljhGC/dev?action=checkout&id=1

Here is my javascript within the HTML File

console.log(document.url);

      var url = new URL(window.location.href);
      var query_string = url.search;
      var search_params = new URLSearchParams(query_string); 
      search_params.set('action', 'checkout');
       url.search = search_params.toString();
       var new_url = url.toString();
       window.location.replace(new_url);
       console.log(new_url);
    }

This is the URL that gets logged

https://n-ikwx...khq-1lu-script.googleusercontent.com/userCodeAppPanel?action=checkout

How do I retrieve the actual URL that is in the address bar?

Thanks in advance!

Answer 1

Issue:

A iframe with different origin cannot read the href property of location of the the parent/top frame, which is write only. So, You can't.

Solution:

You can however pass the url from server side.

Server side:

function getTopUrl(){
  return ScriptApp.getService().getUrl();
}

Client side:

var topUrl;
function getTop(){
  google.script.run.withSuccessHandler((url)=>{topUrl=url;}).getTopUrl();
}
window.addEventListener('load', getTop);

References:

• Where is my iframe in the published web application/sidebar?
• Same origin policy
• Service#getUrl
• google.script#run