iframe 沙盒模式脚本不起作用答案

【问题标题】：Iframe sandbox mode script not workingiframe 沙盒模式脚本不起作用
【发布时间】：2015-12-04 01:59:31
【问题描述】：

我尝试从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>

【问题讨论】：

标签： html iframe google-apps-script

【解决方案1】：

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

而不是这个：

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

你应该使用：

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

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

代码.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) );
}

索引.html

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

由于我使用的是示例，我还更改了模板化 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>

【讨论】：

谢谢Mogsdad，我马上试试。