Safari iOS Form Bug(?)

时间:2015-12-16 17:47:07

标签: javascript ios html5 safari

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

  1. 加载主要HTML页面
  2. onload,jquery获取内容页面
  3. 从导航栏中选择操作(iosTest)
  4. jQuery获取加载表单
  5. 按完成,清除页面,显示文字......或
  6. 按取消,清除页面,jquery获取取消消息
  7. 第5步有效,然后Safari重新加载原始网址
    第6步似乎无法正常工作,Safari只是重新加载原始URL 我对所有人的问题是“这是一个已知的bug,是否存在变通方法......或者我是否通过动态加载表单来做一些非常愚蠢的事情?”


    主要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>
    

1 个答案:

答案 0 :(得分:0)

感谢您的反馈。结果是支持代码时出错。埋藏在深处,正在调用一个不存在的JS函数。 iOS safari不喜欢这样,并在发生错误时重新加载网站。