I have created a web app with the apps script however I am having a problem. I have several links in a menu to navigate in the application and I have another link that goes to a Sheets file.

I would like this link to open in a new tab in my browser. And this is where I encounter my problem. The Sheets opens in a new tab but I get the following error message in the web app :

"Unsafe attempt to initiate navigation for frame with origin 'https://script.google.com' from frame with URL 'https://n-psool6bzsn7nbbxcwije73kogaweb6gvevl5w2i-0lu-script.googleusercontent.com/userCodeAppPanel'. The frame attempting navigation of the top-level window is sandboxed with the 'allow-top-navigation-by-user-activation' flag, but has no user activation (aka gesture)"

And when I click on another link, the Sheets opens in the same tab.

Here is the JS that opens the Sheets in a new tab :

  function sheets(){
     var url = document.getElementById("url").value;
     var link = document.createElement('a');
     link.href = "https://docs.google.com/spreadsheets/d/1oATOMdL5HdCx87YjPS79DVvZee_s6y5_J3t9oloYeZI/edit#gid=0";
     link.id = 'linkURL';
     window.open(document.body.appendChild(link));
     document.getElementById("linkURL").click();        
   }

Here is the beginning of one of the html pages (the navigation bar is identical for all pages :

<nav id="navigation" >
   <div  id="navbarNav">
     <input type="button"  id="buttonSelected" value="Page 1"/>
     <input type="button"  id="button" value="Page 2" onclick="formulaire()"/>
     <input type="button"  id="button" value="Page 3" onclick="archives()"/>
<input type="button"  id="button" value="Sheet" onclick="sheets()"/>
   </div>
   <?var url = getUrl();?><input type="hidden" value="<?= url ?>" id="url"/>
 </nav>

And here is the apps script code:

function doGet(e){
   if(!e.parameter.page){
     return render('Index');
   }
   else if(e.parameter['page'] == 'Formulaire'){
     var htmlOutput = HtmlService.createTemplateFromFile('Formulaire');
     return htmlOutput.evaluate();  
   }
   else if(e.parameter['page'] == 'Index'){
     var htmlOutput = HtmlService.createTemplateFromFile('Index');
     return htmlOutput.evaluate();  
   }
   else if(e.parameter['page'] == 'Archives'){
     var htmlOutput = HtmlService.createTemplateFromFile('Archives');
     return htmlOutput.evaluate();  
   }
 }

 function getUrl(){
   var url = ScriptApp.getService().getUrl();
   return url;
 }

I saw this post but i don't know how can i apply its in my dev.

Thank you for your help.

CodePudding user response：

In your situation, how about the following modification? In this modification, your function of sheets() is modified as follows.

Modified script:

function sheets() {
  var url = "https://docs.google.com/spreadsheets/d/1oATOMdL5HdCx87YjPS79DVvZee_s6y5_J3t9oloYeZI/edit#gid=0";
  window.open(url, "_blank");
}

• When sheets() is run, the URL is opened as a new tab.

Note:

• When you modified the Google Apps Script of Web Apps, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful about this.

• You can see the detail of this in my report "Redeploying Web Apps without Changing URL of Web Apps for new IDE (Author: me)".

Reference:

• Window.open()