Question

我尝试从native模式切换到iframe但是当我点击按钮时，HTML文件的<script>部分正在提供空白页面。我无法在开发控制台上看到错误。

这是index.html：

<!DOCTYPE html>
  <html>

  <!-- PRUEBA CON EL IFRAME SANDBOX MODE -->
<body>
<div>
<h3 style=color:blue>Seaport 106</h3>
<form id="email_subscribe">
 Fecha de Ingreso:
 <input type="date" name="dayIn" min="2015-12-01" max="2016-03-25"><br>
<br>
Fecha de Salida:
<input type="date" name="dayOut" min="2015-12-08" max="2016-04-01"><br>
<br>
 Cantidad de Huespedes:
<input type="number" name="guests" min="1" max="4">
<input type="submit" value="enviar">
 </form>
<span id="thank_you" hidden="true"></span>
 (Navegadores soportados: Chrome, Android, Safari)
</div>
 <div id="form-content">
</div>
<?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?> <!-- cargo         la hoja de estilo -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
 </script> 

<script>
 $( document).ready(function() { // The safest way to accomplish this is to     use the jQuery ready method, which will watch for the page to be fully loaded   before it starts executing JavaScript.
 $( "#email_subscribe" ).submit(function() { // funcion submit incorporada en la biblioteca jquery
//leyenda e imagen de espera antes del la funcion handler al backend:
   $( "#form-content" ).append(' PROCESANDO...' + '<br></br>' /* <img   src="http://goo.gl/23NPRI">  esta imagen debe estar en https tambien  */);  

 google.script.run.withSuccessHandler(function(ret){ //ejecuto funcion que    necesita un return value
    $( "#thank_you" ).show("slow"); // aparece con estilo
    //No desaparece mas: $("#email_subscribe").slideUp(); // desaparece deslizandoce
    $( "#form-content" ).html(' Processing....'  );  
   $( "#form-content" ).html(ret); 
    // $("#form-content").load(ret)
    console.log(ret);
  }).CalcSp106(this)           // real Calc109(this) prueba showhtmltext();  //this is ther Form Element // function que esta en el server side (code.gs)
  });
 });
  </script>
  </body>
 </html>

Answer 1

使用SandboxMode.IFRAME，您应该使用点击处理程序通过提交按钮调用服务器端处理程序，而不是submit操作。

而不是：

<input type="submit" value="enviar">
       ^^^^^^^^^^^^^

您应该使用：

<input id="button-submit" type="button" value="enviar"/>
                          ^^^^^^^^^^^^^

您需要一个submit()操作处理程序，而不是将click()处理程序绑定到该按钮。

Code.gs

您没有共享服务器端代码。以下是我使用的内容，改编自WebApp示例：

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Index');

  // Build and return HTML in IFRAME sandbox mode.
  return template.evaluate()
      .setTitle('Web App Window Title')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function CalcSp106( form ) {
  // Echo back the received object
  return( JSON.stringify(form) );
}

的index.html

现在有一个click()处理程序绑定到按钮，而不是表单。因此，该按钮具有自己的ID button-submit。我删除了额外的代码＆amp;评论与问题无关。

由于我使用的是示例，因此我还更改了模板化HTML行，以加载默认的'Stylesheet'。

<!DOCTYPE html>
<html>

<!-- PRUEBA CON EL IFRAME SANDBOX MODE -->

<body>
  <div>
    <h3 style=color:blue>Seaport 106</h3>
    <form id="email_subscribe">
      Fecha de Ingreso:
      <input type="date" name="dayIn" min="2015-12-01" max="2016-03-25"/>
      <br>
      <br> Fecha de Salida:
      <input type="date" name="dayOut" min="2015-12-08" max="2016-04-01"/>
      <br>
      <br> Cantidad de Huespedes:
      <input type="number" name="guests" min="1" max="4"/>
      <input id="button-submit" type="button" value="enviar"/>
    </form>
    <span id="thank_you" hidden="true"></span> (Navegadores soportados: Chrome, Android, Safari)
  </div>
  <div id="form-content">
  </div>
  <?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>

    <script>
      $(document).ready(function() {
        $("#button-submit").click(function() { 
          $("#form-content").append(' PROCESANDO...' + '<br></br>' );

          google.script.run
            .withSuccessHandler(function(ret) {
              $( "#form-content" ).html(ret); 
              console.log(ret);
            })
            .CalcSp106(this.parentNode)
        });
      });
    </script>
</body>

</html>

iframe沙箱模式脚本无法正常工作

1 个答案:

Code.gs

的index.html