การแปลงจากแซนด์บ็อกซ์ NATIVE เป็น IFRAME

ฉันมีแอปพลิเคชันขนาดใหญ่ที่ฉันต้องการแปลงจากแซนด์บ็อกซ์แบบ 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;
}

จาวาสคริปต์.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>

person KBerk    schedule 19.11.2015    source แหล่งที่มา


คำตอบ (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 หน้าในคอนโซลของเบราว์เซอร์

person Alan Wells    schedule 20.11.2015
comment
ขอขอบคุณที่ชี้ให้เห็นว่าฉันใช้ปุ่มประเภทส่งในทางที่ผิดอย่างไร ฉันไม่ได้คาดหวังหรือต้องการให้โหลดหน้าแรกของฉันซ้ำ ฉันทำตามคำแนะนำของคุณเพื่อใช้ปุ่มประเภทปุ่ม และตอนนี้แอปพลิเคชันของฉันก็ทำงานได้ตามที่ตั้งใจไว้ - person KBerk; 24.11.2015
comment
ขอบคุณสำหรับคำติชม - person Alan Wells; 24.11.2015