Safari iOS 表单错误 (?)答案

【问题标题】：Safari iOS Form Bug (?)Safari iOS 表单错误 (?)
【发布时间】：2016-03-22 23:41:14
【问题描述】：

我有一个简单的网页，可以在 Safari 模拟器和 OSX Safari 中正常工作，但是它会在完成表单后重新加载网站。我正在运行最新版本的 iOS (9.2 13C75)。该页面是用 html5/css3 编写的，并使用 Javascript 和 bootstrap css。 jQuery 用于将页面动态加载到指定的 div 中。基本的网络逻辑是：

加载主 html 页面
onload，jquery 获取内容页面
从导航栏中选择操作 (iosTest)
jQuery 获取加载表单
按完成，清除页面，显示文本...或
按取消，清除页面，jquery 获取取消消息

第 5 步有效，然后 Safari 重新加载原始 URL
第 6 步似乎无法正常工作，Safari 只是重新加载原始 URL
我的问题是“这是一个已知的错误，是否有解决方法......或者我是否通过动态加载表单做了一些非常愚蠢的事情？”

主要 HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ios Mobile Safari Test</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/ios_test.css" rel="stylesheet">
  </head>
  <body onload="initialSetup('html/ios_about.html','body_cell')">
    <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topNav">
      <div class="container" id="navbar">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" id="welcome" onClick="goHome('html/ios_about.html','body_cell')">ios Mobile Safari Test</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
          <li id="iostest"><a onClick="goiosTest('html/ios_dialog.html', 'body_cell')">iosTest</a></li>
       </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    <div class="noBorder" id="SD_Main">
        <div class="container" id="leftNav"></div>
        <div class="container" id="body_cell"></div> <!-- /container -->
    </div>
    <div class="container" id="test" width="100%"></div>
    <div class="container" id="debug" width="100%"></div>
    <script src="js/jQuery/jquery-1.11.3.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  <script src="js/iosTest.js"></script>
  </body>
</html>

JavaScript (iosTest.js)

var body_cell = "#body_cell";
function goHome(pageToLoad, target)
{initialSetup(pageToLoad, target);}
function initialSetup (pageToLoad, target)
  {
    $.when($.get(pageToLoad) ).done(function (xml_stream)
      { $("#"+target).empty();$("#"+target).append(xml_stream);});
  }
function goiosTest(pageToLoad, target)
{
  $.when($.get(pageToLoad) ).done(function (xml_stream)
     { $("#"+target).empty();$("#"+target).append(xml_stream);});
}
function ios_postDialog(comment, o_name, c_name, Create)
{
  $(body_cell).empty();
  $(body_cell).append("<h2>dialog completed</h2>");
}
function ios_cancelDialog()
{
  $.when($.get("html/ios_alt.html") ).done(function (xml_stream)
    { $(body_cell).empty();$(body_cell).append(xml_stream);});
}

表格

<div class = "container" id="SD_dialogBox">
<h2>SSample Dialog Box.</h2>
  <form class="form-horizontal" role="form">
     <div class="form-group">
        <label for="c_name" class="col-sm-2 control-label" >Client Name:</label>
        <div class="col-sm-8">
          <select id="c_name"></select>
        </div>
    </div>
     <div class="form-group">
        <label for="o_name" class="col-sm-2 control-label" >Opportunity Name:</label>
        <div class="col-sm-8">
          <select id="o_name" ></select>
        </div>
      </div>
      <div class="form-group">
        <label for="comment" class="col-sm-2 control-label">Comments on Opportunity - anything that is relevant to you.</label>
        <div class="col-sm-8">
          <textarea class="form-control" id="comment" rows="5"></textarea>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-8">
        <button class="button-wide" id="submit" onClick="ios_postDialog('comment', 'o_name', 'c_name', 'Create')">Save this Information</button>
        <button class="button-wide" id="cancel" onClick="ios_cancelDialog()">Cancel</button>
       </div>
      </div>
    </form>
</div>

【问题讨论】：

你在其他浏览器中测试过吗？
挑战在那里。我已经在 OSX 和 Windows 上的 FFox、Safari、Chrome 以及 xCode 的 Safari iOS 模拟器中进行了测试。适用于所有这些环境。对 Web 服务器的 VPN 访问限制了 iOS 对 Safari 的访问。所以，不，还没有在 iOS 上的其他浏览器上测试过。

标签： javascript ios html safari

【解决方案1】：

感谢您的反馈。原来是支持代码的错误。埋在深处，正在调用一个不存在的 JS 函数。 iOS Safari 不喜欢这样，并在发生该错误时重新加载了该站点。

【讨论】：