我有一个大型应用程序，我想从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>I have a large application that I want to convert from NATIVE to IFRAME sandbox now that NATIVE is deprecated. The general flow of the application is as follows: The user fills out a form on the beginning page and presses a Begin button. The beginning page is then hidden, and based upon values from the first page, the user is then shown a new page. My problem when using IFRAME is that the new page is never shown. It works as expected in NATIVE mode. I have created a simplified script that exhibits the problem. Please help me understand what I am forgetting or doing wrong.
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>最满意答案
使用“submit”类型的按钮是没有意义的，除非您要强制表单发出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页面错误。
There is no point in ever using a button of the "submit" type, unless you want to force the form to make an HTTP Request, and reload the application. That's what a "submit" type button does. It causes the page to be reloaded. The "submit" type button is meant to work together with a form in a certain way. It causes a GET or POST request to happen. That's what the problem is. So, you'll need to reconfigure things a little bit.
Just use a plain button.
<input type="button" value="Begin" onmouseup="gotoPg2()">I created a gotoPg2() function to test it:
<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>If you use that, they you don't need the $(document).ready(function() { etc. code anymore. And, if you don't need that code, then you don't need to load jQuery.
Unless you are using jQuery for other things, then you don't need:
<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>The NATIVE mode was probably blocking the intended usage of the "submit" request. That's why the code in NATIVE was working. IFRAME allows things to work as they are built and intended to work, which means that the page was probably trying to be reloaded, and an error was occurring. I was getting a 404 page error in the browser console.
更多推荐
发布评论