When you click any link again in an embedded WebApp written in Google Script, a white screen is displayed. Where is the problem?

F

fkprofi2021-02-04 16:10:59

JavaScript

fkprofi, 2021-02-04 16:10:59

There is a main site with an iframe
A web application written in Google Script is inserted into this iframe.
Web application consists of 2 pages: Authorization and Main page.
On the authorization page there is a button "Login" - by pressing it, you go to the Main page.
The "Exit" button on the Main page is written according to the same principle - it should return to the Authorization page.
In developer mode, everything works as it should.
It is worth deploying the application and embedding it on the site in a frame - the first click on the button (this "Login" button) works as it should and goes to the desired page, but the second click on any other button on a new page always leads to a white screen.
What I've tried:
1. I made the loading of the first page "Main" and clicking on the "Exit" button - everything works as it should and goes to the Authorization page. There, clicking on the "Login" button - again a white screen.
2. For pages to load in the same frame base target="_self". So the 2nd press leads to a white screen. If you put target="_top" - everything works fine, but the action leaves the main site and the inscription appears at the top of the page "This application was created by another user, not by Google."
3. Naturally, .evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) is used in both cases of page loading.

An example of how the application works (any password for authorization): https://sites.google.com/view/fkprofi/%D0%B3%D0%BB...

JS

// Главная функция
function doGet(e) {
  if (e.parameter.page === "index") {
       var tmp = setTmp(e);
    return render("index",tmp);    
  } else { 
return loadHome()} 
};

// Формирование данных для отображения по клиенту
function setTmp (e) {
  var tmp = {};
  tmp.operator = e.parameter.oper;
  return tmp;
};
//-----------------------

// Загрузка страницы с логином и паролем
function loadHome(){

  var operator = ["1", "2", "3"];
  var htmlListArray = operator.map(function(r) {return '<option>' + r[0] + '</option>'; } ).join();
  var tmp = {};
  tmp.operator = htmlListArray;   
  return render("home",tmp);
};

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

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

// Рендер страницы
function render(file, argsObject){
  var tmp = HtmlService.createTemplateFromFile(file);
  
  if (argsObject) {
    var keys = Object.keys(argsObject);
    
    keys.forEach(function(key){
      tmp[key] = argsObject[key];
    });
  } //END IF
  
  return tmp.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

Login Page

<!DOCTYPE html>
<html>
  <head>
        <base target="_self">

    <?!= include("page-css") ?>
  </head>
  <body>
  
<div class="container" > 
  
<div id="loginDisplay" >  <!-- Авторизация  -->
  <div class="container" > 
    <h2>Авторизация</h2>  
      <select id="username">
        <option value="1" disabled selected>Имя оператора</option>
        <?!= operator ?>
      </select>
      <label>Имя оператора</label>
    
      <label>Пароль</label><br>
        <input type="password" id="password" /><br>
        <input type="button" class="waves-light btn green darken-3" value="Войти" onclick="LoginUser()" /><br>
        <span id="errorMessage" style="color: red" ></span>   
 
    <?var url = getUrl();?><input type="hidden" value="<?= url ?>" id="url" />

  </div>
</div>  <!-- Конец авторизации  -->
   
</div>     
     
     
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>

 <script>

   document.addEventListener('DOMContentLoaded', function() {
       var selectBoxes = document.querySelectorAll('select');
       M.FormSelect.init(selectBoxes);
       });
       


function LoginUser() {
         var operator = document.getElementById("username").value;
         var operatorId = document.getElementById("password").value;
          
         var url = document.getElementById("url").value;
         var link = document.createElement('a');
         link.href = url+"?oper="+operator+"&operId="+operatorId+"&page=index";
         link.id = 'linkURL';

         document.body.appendChild(link);
         document.getElementById("linkURL").click();        
    
    };


 </script>

 
</body>
</html>

Main page

<!DOCTYPE html>
<html>
  <head>
        <base target="_self">

  </head>
<body>
 
  <div class="row">
     <div class="col m7"> 
        <h5>Оператор: <?= operator ?> </h5> 
     </div>
      <?var url1 = getUrl();?>


     <div class="col m1"> 
        <input type="hidden" value="<?= url1 ?>" id="url1" />
        <a class="waves-light btn red darken-3" href="<?= url1 ?>?page=home"/>Выйти </a> // Здесь пробовал и через onclick на функцию похожую на function LoginUser() - но все равно белый экран выходит. 
     </div>
   </div>

</body>
</html>