Question

我有一个大型应用程序，我想将NATIVE转换为IFRAME沙箱，因为NATIVE已被弃用。应用程序的一般流程如下：用户在开始页面上填写表单并按下“开始”按钮。然后隐藏起始页面，并且基于来自第一页面的值，然后向用户显示新页面。使用IFRAME时的问题是永远不会显示新页面。它在NATIVE模式下按预期工作。我创建了一个展示问题的简化脚本。请帮助我理解我忘记或做错了什么。

Code.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>

Page2.html

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

Answer 1

除非您要强制表单发出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页错误。

从NATIVE转换为IFRAME沙箱

1 个答案: