Преобразование из NATIVE в песочницу IFRAME

У меня есть большое приложение, которое я хочу преобразовать из NATIVE в песочницу IFRAME теперь, когда NATIVE устарел. Общий поток приложения выглядит следующим образом: пользователь заполняет форму на начальной странице и нажимает кнопку «Начать». Затем начальная страница скрывается, и на основе значений с первой страницы пользователю показывается новая страница. Моя проблема при использовании IFRAME заключается в том, что новая страница никогда не отображается. Он работает, как и ожидалось, в режиме NATIVE. Я создал упрощенный сценарий, демонстрирующий проблему. Пожалуйста, помогите мне понять, что я забыл или делаю неправильно.

Код.gs

function doGet() {
  Logger.log('enter doget');
  var html = HtmlService.createTemplateFromFile('BeginHeader').evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  return html;
}

function include(filename) {
  Logger.log('enter include');
  Logger.log(filename);
  var html = HtmlService.createHtmlOutputFromFile(filename).getContent();
  Logger.log(html);
  return html;
}

Javascript.html

<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
  src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
<script 
  src="https://apis.google.com/js/api.js?onload=onApiLoad">
</script>

<script>
  function showForm(hdr) {
    console.log('enter showform');
    console.log(hdr);
    console.log('hiding first page');
    document.getElementById('beginDiv').style.display = 'none';
    var el = document.getElementById('recordDiv');
    el.innerHTML = hdr;
    console.log('showing new page');
    el.style.display = 'block';
  }

  function oops(error) {
    console.log('entered oops');
    alert(error.message);
  }
</script>

<script>
  $(document).ready(function() {
    console.log('begin ready');
    $("#beginForm").submit(function() {
      console.log('enter begin submit');
      //console.log('hiding first page');
      //document.getElementById('beginDiv').style.display = 'none';
      console.log('including page 2');
      google.script.run
      .withSuccessHandler(showForm)
      .withFailureHandler(oops)
      .include('Page2');
    });
  });

</script>

BeginHeader.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div id="beginDiv" style="display:block">
      <p>Click on Begin. </p>
      <form id="beginForm">
        <input type="submit" value="Begin">
      </form>
    </div>

<!-- results of content being filled in -->
    <div id="recordDiv"></div>

<?!= include('Javascript'); ?>

  </body>
</html>

Страница2.html

<!DOCTYPE html>
<html>
  <body>
      <p> This is page 2. </p>
  </body>
</html>

google-apps-script
person KBerk    schedule 19.11.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Нет смысла когда-либо использовать кнопку типа «отправить», если только вы не хотите заставить форму сделать HTTP-запрос и перезагрузить приложение. Это то, что делает кнопка типа «отправить». Это приводит к перезагрузке страницы. Кнопка типа «отправить» предназначена для совместной работы с формой определенным образом. Это вызывает запрос GET или POST. Вот в чем проблема. Итак, вам нужно немного перенастроить вещи.

Просто используйте обычную кнопку.

<input type="button" value="Begin" onmouseup="gotoPg2()">

Я создал функцию gotoPg2() для проверки:

<script>
  window.gotoPg2 = function() {
    console.log('enter begin submit');
    //console.log('hiding first page');
    //document.getElementById('beginDiv').style.display = 'none';
    console.log('including page 2');
    google.script.run
      .withSuccessHandler(showForm)
      .withFailureHandler(oops)
      .include('Page2');
  };
</script>

Если вы используете это, вам больше не нужен код $(document).ready(function() { etc.. И если вам не нужен этот код, вам не нужно загружать jQuery.

Если вы не используете jQuery для других целей, вам не нужно:

<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
  src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>

Режим NATIVE, вероятно, блокировал предполагаемое использование запроса «отправить». Вот почему код в NATIVE работал. IFRAME позволяет вещам работать так, как они созданы и предназначены для работы, что означает, что страница, вероятно, пыталась перезагрузиться, и произошла ошибка. Я получал ошибку 404 страницы в консоли браузера.

person Alan Wells    schedule 20.11.2015
comment
спасибо, что указали, как я неправильно использовал кнопку типа отправки. Я не ожидал и не хотел, чтобы моя начальная страница была перезагружена. Я последовал вашему предложению использовать кнопку типа кнопки, и теперь мое приложение работает так, как я предполагал. - person KBerk; 24.11.2015
comment
Спасибо за ваш отзыв! - person Alan Wells; 24.11.2015