AngularJS Web App停止在iPhone 6上运行

时间:2014-11-24 06:57:47

标签: ios angularjs safari iphone-6

我有一个AngularJS移动网站,可以在iPhone 5,iPhone 5s(运行iOS 8)和iPad(iOS 8)上运行良好。但是,登录'按钮在iPhone 6上不起作用(例如,您单击它并且没有任何反应)。完全相同的网站在其他iOS移动平台上工作没有任何问题。这对我来说没有意义,因为它们都是iOS 8?

另一方面,该网站可以通过浏览器堆栈在iPhone 6模拟器上运行,但不能在物理iPhone 6上运行。我不确定它是否是iPhone 6上的默认设置但我不能找到任何东西。

以下是单击登录按钮时调用的代码:

标记的代码段是:

<div class="col-sm-6 bordered-form field-padding">
  <form name="loginForm" role="form" novalidate>
    <div class="row">
      <div class="col-sm-12">
        <h4>Existing employers login</h4>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 form-group">
        <input type="email" name="email" ng-model="user.email" placeholder="Please enter your email address" class="validatedInputField" required>
          <span ng-show="loginForm.email.$valid" class="glyphicon glyphicon-ok icon-success"></span>
          <span ng-show="loginForm.email.$invalid && loginForm.email.$dirty" class="glyphicon glyphicon-remove icon-invalid"></span>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 form-group">
         <input type="password" name="password" ng-model="user.password" placeholder="Please enter your Password" class="validatedInputField" required ng-minlength="6">
          <span ng-show="loginForm.password.$valid" class="glyphicon glyphicon-ok icon-success"></span>
          <span ng-show="loginForm.password.$invalid && loginForm.password.$dirty" class="glyphicon glyphicon-remove icon-invalid"></span>
      </div>
      <div class="col-sm-12">
        <button class="btn btn-success" ng-disabled="loginForm.$invalid" ng-click="authenticate()"><span class="glyphicon glyphicon-thumbs-up"></span>&nbspLogin</button>
      </div>
    </div>
  </form>
</div>

角度函数在这里:

$scope.authenticate = function(){

var credentials = "Basic " + $window.btoa( this.user.email + ":" + this.user.password );

 $http.get( ENV.apiEndpoint + '/auth/basic/', 
     {headers: {'Authorization': credentials}})

    .success( function(data, status, headers, config){

        AuthorisationService.LoginUser(data);

    }).
    error( function(data, status, headers, config) {
        ErrorLoggingService.logError( data, status, headers, config );
    }); 
}

Angular版本:1.2.15

Bootstrap版本:~3.0.3

有没有人在iPhone 6上遇到过这个问题?

由于我无法访问物理iPhone 6,因此我在解决问题时遇到了一些问题。如果有人可以访问iPhone 6,我可以让他们访问我网站上的测试帐户,他们可以很快地复制这个问题。

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:5)

我在遇到问题的实际iPhone 6上对此进行了调试,并且当服务器返回的令牌存储在会话存储中时,我发现它失败了。

我打电话给Apple支持,花了很多时间和他们通电话。该页面正在使用其他iPhone 6设备但不是这个。在尝试了几个不同的设置并确认它在Chrome上工作后,这位出色的Apple支持人员让我看看该页面是否设置为“私人”。

在Safari浏览器的右下角,您点击一个图标,然后您可以将各个网站设置为“私人”。取消选中此功能使网站正常工作,我可以将令牌存储在会话存储中。我的客户似乎不小心将网站设置为“私人”网站。这导致了这个问题。

希望这可以节省其他人一些类似的问题。完全归功于Apple支持人员花了一个多小时来解决此问题。