建行APP内嵌网站项目功能兼容问题

Question

情况说明：

本菜鸟最近做了一个跟建行合作的项目。在建行APP中显示自己公司的网站。由自己小组的技术大牛带领。大牛走了。剩下本菜鸟来维护其代码，遇到很多难懂的问题。在测试过程中发现了很多自认为是“兼容性”的问题。

问题描述：

1.部分安卓手机 后退功能失效。history.go(-1). 每次执行都回回到首页！！
2.部分安卓手机 后退功能报错。istory.go(-1). ajax报错 状态吗 0 ,error。
3.查询了几个通宵也没发现原因。希望大神能帮忙指导下。

源码：

ccb_common.js
(function(root, $){
    root.CCBCommon = function(path){
        var self = this;
        var basePath = path + '/channel/ccb';
        var indexPath = path + '/channel/ccb/index.jsp';

        /**
         * 初始化页面
         */
        self.init = function(){
            var $ajaxContent = $('[data-ajax-content=true]');
//            alert("进入初始化");
            if ($.fn.common_ajax) {
               alert("初始化成功");
                //初始化公共方法
                $ajaxContent.common_ajax({
                    'content_url': function(){
                        var url = comm.getUrlHashPath();
                      
                        if (url) {
                            url = basePath + url + '.html?v='+new Date().getTime();
                        } else {
                            //var city=CommonBusiness.getCityCode();
                            var city =sessionStorage.getItem('__cityCode');
                            if(!city){
                                 city=CommonBusiness.getCityCode();
                            }
                            
                            url = basePath + '/html/'+city+'index.html?v='+new Date().getTime();
                        }
                        return url;
                    },
                    'have_header': true,
                    'update_title': true
                });
                
                
                //监听a标签的点击事件
                $ajaxContent.on('click', 'a[data-ajax]', function(){
                    var $this = $(this);
                    var href = $(this).attr('href');
//                    alert("HREF:"+href);
                    if (href) {
//                        alert("调用TO_方法");
                        self.to({}, href,false);
                    }
                    return false;
                });
            }
            $ajaxContent.on('click', '.head-return', function(){
                window.history.go(-1);
            });
        };


        /**
         * 跳转页面
         * @param opts
         * @param hashPath
         * @param isLoad 链接重复是否刷新
         */
        self.to = function(opts, hashPath, isLoad){
       //     alert("TO_跳转操作");
            window.history.pushState(opts, '', indexPath + '#' + hashPath);
            $('body').trigger('push_state.ccb');
            $('[data-ajax-content=true]').common_ajax('loadUrl', isLoad);
            alert(history.go.length);
        };

        /**
         * 替换链接
         * @param opts
         * @param hashPath
         * @param isLoad 链接重复是否刷新
         */
        self.toReplace = function(opts, hashPath, isLoad){
//            alert("TO_替换链接操作");
            window.history.replaceState( opts, '', indexPath + '#' + hashPath);
            $('body').trigger('push_state.ccb');
            $('[data-ajax-content=true]').common_ajax('loadUrl', isLoad);
        };

    };
})(this, jQuery);

common_ajax.js
(function($){
    var ajax_loaded_scripts = {};

    var CommonAjax = function(container, options){
        var $container = $(container);
        var self = this;
        var content_url = options.content_url || false;
        var default_url = options.default_url || false;
        var update_title = options.update_title || false;
        var max_load_wait = options.max_load_wait || false;
        var have_header = typeof options.have_header!='undefined' ? options.have_header : true;

        var clear = function(){
            $(window).off('scroll');
        };

        /**
         * 是否即使当前链接跟上个链接的一致也进行刷新操作
         * @param forceRefresh
         * @returns {boolean}
         */
        self.loadUrl = function(forceRefresh) {
//            alert("进入LoadURL方法");
            var url = false;
            if (typeof content_url==='function') {
                url = content_url();
            }
            if (typeof url !== 'string') {
                return false;
            }

            //如果上一个当前链接跟上一个链接（在公共对象data-url中存在）一样是否刷新，默认不刷新
            if (!forceRefresh) {
                var u = comm.getUrlPath(url);
                var du = comm.getUrlPath($container.attr('data-url') || '');
                if (u===du) {
                    return ;
                }
            }
//            alert(url);
            comm.startLoading();
            $.ajax({
                'url': url,
                'async': false
            }).error(function(XMLHttpRequest, textStatus, errorThrown){
//                alert(XMLHttpRequest.readyState);
//                alert(textStatus);
                comm.prompt.infoSmall('数据加载错误，请稍后再试！', 1000);
                comm.stopLoading();
                window.history.back();
            }).done(function(result){
                // 在附加之前清除上一页面可能影响以后页面的元素
                clear();
                $container.attr('data-url', url);
                $container.empty().html(result+"<script>comm.stopLoading();</script>");
                if (typeof update_title === 'function') {
                    update_title();
                } else if (update_title === true) {
                    updateTitle();
                }
                if (!have_header) {
                    $container.find('.ui-container').css('margin-top', '0px');
                    $container.find('.ui-intro-container').css('margin-top', '0px');
                    $container.find('header.header').remove();
                }
                //把提示框数量归零，不然上一个未关闭时退出会一直提示
                startLoadingCount=0;
                //comm.stopLoading();
            });
        };

        var updateTitle = function(){
            var $title = $container.find('header').find('h1');
            if ($title.length>0) {
                document.title = $title.text();
            }
        };

        var scriptRename = function(name) {
            return "js-"+name.replace(/[^wd-]/g, '-').replace('/--/g', '-');
        };

        self.loadScripts = function(scripts, callback){
//            alert("执行loadScript方法");
            // 让 script 缓存
            $.ajaxPrefilter('script', function(opts){opts.cache = true});

            setTimeout(function(){
                var finishLoading = function(){

                    if(typeof callback === 'function') callback();
                };

                var deferred_count = 0; // 延期加载的脚本数量
                var resolved = 0; // 已加载的数量
                for (var i=0; i < scripts.length; i++) {
                    if (scripts[i]) {
                        if (ajax_loaded_scripts[scriptRename(scripts[i])] !== true) {
                            deferred_count ++;
                        }
                    }
                }

                var nextScript = function(index) {
                    index += 1;
                    if (index < scripts.length) {
                        loadScript(index);
                    } else {
                        finishLoading();
                    }
                };

                var loadScript = function(index) {
                    index = index || 0;
                    if (!scripts[index]) { // 有时可能为Null
                        return nextScript(index);
                    }
                    var script_name = scriptRename(scripts[index]);
                    if (ajax_loaded_scripts[script_name] !== true) {
                        $.getScript(scripts[index]).done(function(){
                            ajax_loaded_scripts[script_name] = true;
                        }).always(function(){
                            resolved ++;
                            if (resolved >= deferred_count) {
                                finishLoading();
                            } else {
                                nextScript(index);
                            }
                        });
                    } else {
                        nextScript(index);
                    }
                };

                if (deferred_count > 0) {
                    loadScript();
                }
                else {
                    finishLoading();
                }
            }, 10);
        };

        $(window).off('popstate.common_ajax')
            .on('popstate.common_ajax', function(){
                self.loadUrl();
            }).trigger('popstate.common_ajax');
    };

    //初始化公共方法，以供后期调用
    $.fn.commonAjax = $.fn.common_ajax = function(option, value, value2) {
//        alert("看看是不是第一个");
        var method_call;
        this.each(function(){
            var $this = $(this);
            var data = $this.data('common_ajax');
            var options = typeof option === 'object' && option;
            if (!data) {
                $this.data('common_ajax', (data = new CommonAjax(this, options)));
            }
            if (typeof option === 'string' && typeof data[option] === 'function') {
                if (value2 != undefined) {
                    method_call = data[option](value, value2);
                } else {
                    method_call = data[option](value);
                }
            }
        });
        return method_call;
    }
})(jQuery);


index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx}/channel/ccb/css/style.css">
    <link rel="stylesheet" href="${ctx}/channel/ccb/css/swiper.min.css">
    <link rel="stylesheet" href="${ctx}/channel/ccb/css/mobiscroll_date.css">
    <link rel="stylesheet" href="${ctx}/channel/ccb/css/cityselect.css">
    <title>自己的项目</title>
    <script type="text/javascript">
        var path="${ctx}";
        var ctx = "${ctx}";
        var domain = location.href.substring(0, location.href.indexOf(path + '/channel/'));
    </script>
</head>
<body>
    <input type="hidden" id="ctx" value="${ctx}"/>
    <div data-ajax-content="true">

    </div>


    <script src="${ctx }/channel/ccb/js/common/flexible.js"></script>
    <script src="${ctx }/channel/ccb/js/common/jquery.min.js"></script>
    <script src="${ctx }/channel/ccb/js/common/swiper.min.js"></script>
    <script src="${ctx }/channel/ccb/js/common/touchslide.js"></script>
    <script src="${ctx }/channel/ccb/js/common/dialog.js"></script>
    <script src="${ctx }/channel/ccb/js/common/func.js"></script>
    <script src="${ctx }/channel/ccb/js/common/mobiscroll_date.js"></script>

    <script src="${ctx }/channel/ccb/js/handlebars.min.js"></script>
    <script src="${ctx }/channel/ccb/js/common.js"></script>
    <script src="${ctx }/channel/ccb/js/common_ajax.js?v=1.2"></s

Answer 1

我也遇到了后退问题。求大神帮忙指导下