1

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" class="navbar navbar-expand-lg navbar-dark ">
   <div class="collapse navbar-collapse" id="navbarNav">
     <input type="button" class="buttonNav" id="buttonSelected" value="Page 1"/>
     <input type="button" class="buttonNav" id="button" value="Page 2" onclick="formulaire()"/>
     <input type="button" class="buttonNav" id="button" value="Page 3" onclick="archives()"/>
<input type="button" class="buttonNav" 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.

devMethodes
  • 189
  • 7
  • Although I'm not sure whether I could correctly understand your question, I proposed a modified script as an answer. Could you please confirm it? If I misunderstood your question and that was not useful, I apologize. – Tanaike Dec 07 '22 at 12:21

1 Answers1

2

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:

Reference:

Tanaike
  • 181,128
  • 11
  • 97
  • 165