Cordova - window.history.back() 在 iOS 9 中的 HTML 后退按钮上不起作用

Question

在我的应用程序中，我使用 window.history.back 导航回上一个视图

后退按钮声明

 <div class="back_icon"  id="verification_back_icon"><a href="#" data-rel="back"  data-transition="slidedown"><img src="images/back_btn.png" width="23"/></a></div>

按钮操作：

$( "#verification_back_icon" ).on( "click", function ( e ) {
    if ( checkDirtyVacation() ) {
        e.preventDefault();
        if ( backbtnAlt == false ) {
            backbtnAlt = true;
            confirm( "All data will be lost. Do you want to continue?",
                function ( r ) {
                    if ( r ) {
                        //onBackKeyDown();
                        clearVacationvalues();
                        window.history.back();//this is not working in iOS 9
                    } else {

                    }
                    backbtnAlt = false;
                } );
        }
    }
    else {
        e.preventDefault();
        if ( $( ".vaction_location" ).hasClass( "chkSelect" ) ) {
            $( ".vaction_location" ).removeClass( "chkSelect" );
            $( ".vaction_location" ).addClass( "chkUnSelect" );
        }


        window.history.back();
    }
} );

这在 iOS 8.4 之前运行良好。在 iOS 9 中，此导航不起作用。

我正在使用Apache Cordova native platform version 3.8.0。

如果有人遇到类似问题，请建议我。 我试过history.back doesn't work on iOS using Cordova，但没有运气

谢谢。

Answer 1

问题在于 window.location.hash 的设置在 iOS 9.0 UIWebview 中是异步的（由 Cordova/Phonegap 使用） - 请参阅 this bug report 了解详细信息。

这在使用 jQuery Mobile 时会导致问题，默认情况下使用 window.location.hash 在“页面”之间导航。它还会导致使用此机制的弹出窗口/对话框/选择菜单出现问题。

您可以通过阻止 jQuery Mobile 自动侦听/使用 location.hash 来解决此问题：

$(document).on("deviceready", function(){
    $.mobile.hashListeningEnabled = false;
});

但是，我发现这对 Android 有副作用，例如导致硬件后退按钮不起作用，所以我专门针对 iOS 9 使用 cordova-plugin-device：

$(document).on("deviceready", function(){
    if(device.platform === "iOS" && parseInt(device.version) === 9){
        $.mobile.hashListeningEnabled = false;
    }
});

请注意，我使用的是 navigator.app.backHistory() 而不是 window.history.back() 和 hashListeningEnabled = false - 这可能会有所不同。

或者，您可以使用this plugin 在 iOS 8 和 9 上使用新的 WKWebView。iOS 8+ 上的 Safari 使用 WKWebView，因此在 iOS 9 上的浏览​​器中查看的 JQM 站点不会遇到这些问题。由于 iOS 8 中 WKWebView 中的 a bug，cordova-ios 3 仍然使用 UIWebView，但即将推出的适用于 iOS 9+ 的 cordova-ios 4 will support 和 WKWebView core plugin。请注意，将 WKWebView 与 Cordova/Phonegap 应用程序一起使用时，由于其更严格的安全性，还有其他注意事项，例如在 XHR 响应中需要 CORS 标头。

Answer 2

我认为是A标签的默认操作导致了这个bug。所以我只是通过在点击处理函数的末尾添加return false 来阻止默认操作

而且有效。

• html

<a id="back-btn">back</a>

• javascript

  $('#back-btn').on('click', function(e) {
         window.history.go(-1);
         return false;
      })
  

Answer 3

禁用推送状态对我有用：

$.mobile.pushStateEnabled = false;

Answer 4

解决方案：

这一行解决了我的问题：

 history.go(0); 

我已将window.history.back() 替换为history.go(0);

现在它在 iOS 9 中对我来说工作正常

在 index.html 中

   <script type="text/javascript">$.mobile.hashListeningEnabled = false;</script>

在 onDeviceReady 函数中添加这个：

function onDeviceReady() {
    if ( device.platform === "iOS" && parseInt( device.version ) === 9 ) {
        $.mobile.hashListeningEnabled = false;
    }

    if ( !( $.mobile.hashListeningEnabled &&
        $.mobile.path.isHashValid( location.hash ) &&
        ( $( hashPage ).is( ":jqmData(role='page')" ) ||
            $.mobile.path.isPath( hash ) ||
            hash === $.mobile.dialogHashKey ) ) ) {

        // make sure to set initial popstate state if it exists
        // so that navigation back to the initial page works properly
        if ( $.event.special.navigate.isPushStateEnabled() ) {
            $.mobile.navigate.navigator.squash( path.parseLocation().href );
        }

        $.mobile.changePage( $.mobile.firstPage, {
            transition: "none",
            reverse: true,
            changeHash: false,
            fromHashChange: true
        } );
    } else {
        // trigger hashchange or navigate to squash and record the correct
        // history entry for an initial hash path
        if ( !$.event.special.navigate.isPushStateEnabled() ) {
            $window.trigger( "hashchange", [true] );
        } else {
            // TODO figure out how to simplify this interaction with the initial history entry
            // at the bottom js/navigate/navigate.js
            $.mobile.navigate.history.stack = [];
            $.mobile.navigate( $.mobile.path.isPath( location.hash ) ? location.hash : location.href );
        }
    }
}

验证设备操作系统版本（history.go(0) 仅适用于 iOS 9）iOS 9 之前的版本 window.history.back() 完美运行

现在添加这段代码代替 window.history.back()

if ( device.platform === "iOS" && parseInt( device.version ) === 9 ) {
    console.log( "version" + device.version );
    console.log( "iOS 9" );
    history.go( 0 );
    //write your code here                 
}
else {
    window.history.back();
}

要在控制台中修复此消息“无法加载网页并出现错误：CDVWebViewDelegate: Navigation started when state=1”，请在 CDVWebViewDelegate.m

中添加以下代码

在 - (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType

方法注释这段代码如下所示：

/*if ([_delegate respondsToSelector:@selector(webView:didFailLoadWithError:)]) {
    NSDictionary* errorDictionary = @{NSLocalizedDescriptionKey : description};
    NSError* error = [[NSError alloc] initWithDomain:@"CDVWebViewDelegate" code:1 userInfo:errorDictionary];
    [_delegate webView:webView didFailLoadWithError:error];
}*/

Answer 5

@Sujania，

根据 phonegap 团队的说法，iOS9 并未得到官方支持。这个问题可能是 iOS9 中的又一个 bug。您可能需要等待修复。

PhoneGap Build iOS 9 支持状态
http://community.phonegap.com/nitobi/topics/phonegap-build-ios-9-support-status

顶线：直到 Cordova-iOS 4.0.0 才正式支持 iOS 9，Cordova 团队正在努力开发。然而，一些问题可以通过一些简单的配置更改来解决。

此时，向 Cordova Bug 存储库报告了 4 个错误。您的问题未出现在存储库中 - 截至此日期。

https://issues.apache.org/jira/browse/CB-9684?jql=text%20~%20%22iOS9%22

Answer 6

试试这个

if(r){
         try{
          var nav = window.navigator;
          if( this.phonegapNavigationEnabled && nav && nav.app && nav.app.backHistory )
          {
            nav.app.backHistory();
          }
          else 
          {
            window.history.back();
          }
        }
        catch(e)
        {
         alert(e);
        }
      }