关于easyui整合polymer中tab切换页面不匹配的解决

#项目中遇到的问题：

---

在easyui做菜单栏和页面跳转控制，内部iframe嵌入polymer页面，
切换打开几个窗口页面时，发现前面有页面被替换成了最新加载的页面
项目的这个问题一直没理他，但是一直是一块心病，总想找个时间解决他

---

今天半个晚上解读源码debug终于定位到问题，最终通过精准的定位问题百度直接找出了答案，

---

思路如下：

1.首先发现页面之间点解tab切换时非正常的
2.审查元素发现多个iframe的内容已经被最新那个iframe内容替换了
3.定位是在点击左侧菜单栏的时候变化还是切换的时候变化的
4.定位到时左侧菜单栏加载页面的时候被替换的
5.发现只有第一个页面会被替换，中间几个页面正常显示
6.删除第一个页面后，第二个（变成第一个）原本正常的页面现在也不正常显示了
7.查看点击菜单触发事件和相关的源码：
8.发现源码里面执行完并不影响，而是最后一步完成前会调用呢easyui压缩文件，压缩文件内部处理完后就不正常了，如此定位到问题，
9.通过上述精准的查找，定位到问题后直接百度详细：
10.接着查询到博客解决
接着发现一篇博客好像有说明 http://ask.csdn.net/questions/167414

2、详细定位过程：

1. 如上图，在点击几个左侧菜单栏的页面后，在tab切换页面进行页面切换，发现前面几个tab页面显示会出现异常。
2. 定位是在点击左侧菜单栏的时候变化还是切换的时候变化的 ,通过审查元素，这个地方不好从全部加载后切换这个方式下手，所以我下手的方式是从菜单栏点击时候看点击后是不是前面页面已经被替换。（刚开始并未注意到只有第一个页面被替换了，所以也是拿第一个页面在测试第一个页面在添加页面前后的区别，算是运气成分，少走了弯路）
3. 审查元素发现点击菜单添加页面后，确实改变了原有的页面iframe，如下图的改变前后

接着查看菜单点击添加iframe的源码

//初始化左侧
function InitLeftMenu() {

    $(".easyui-accordion").empty();
    var menulist = "";

    $.each(_menus.menus, function(i, n) {
        menulist += '<div title="'+n.menuname+'"  icon="'+n.icon+'" style="overflow:auto;">';
        menulist += '<ul>';
        $.each(n.menus, function(j, o) {
            menulist += '<li><div><a target="mainFrame" href="' + o.url + '" ><span class="icon '+o.icon+'" ></span>' + o.menuname + '</a></div></li> ';
        })
        menulist += '</ul></div>';
    })

    $(".easyui-accordion").append(menulist);

    $('.easyui-accordion li a').click(function(){
        var tabTitle = $(this).text();
        var url = $(this).attr("href");
        addTab(tabTitle,url);
        $('.easyui-accordion li div').removeClass("selected");
        $(this).parent().addClass("selected");
    }).hover(function(){
        $(this).parent().addClass("hover");
    },function(){
        $(this).parent().removeClass("hover");
    });

    $(".easyui-accordion").accordion();
}

上面是菜单menu初始化
下面是创建tab方法

function addTab(subtitle,url){
    if(!$('#tabs').tabs('exists',subtitle)){
        $('#tabs').tabs('add',{
            title:subtitle,
            content:createFrame(url),
            closable:true,
            width:$('#mainPanle').width()-10,
            height:$('#mainPanle').height()-26
        });
    }else{
        $('#tabs').tabs('select',subtitle);
    }
    tabClose();
}

定位到，在 tabClose()；执行前，dom节点仍然没被改变，在执行完该方法后发现dom节点被改变。
终于有了较大的进展

4. 找到改变页面的方法通过调用栈追踪到在handle方法中进行了一些列处理最终完成dom节点的修改了

jquery-1.4.2.min.js
 return typeof c !== "undefined" && !c.event.triggered ? c.event.handle.apply(o.elem, arguments) : w

5. 但是这只是jquery里面的方法，具体仍需定位到easyui的内部处理，
6. 不过在这一步已经发现了问题正式第一个页面总是被最后一个页面替换，因而百度关键字非常精准地找到了解决方案
7. 来自网友大牛的解决方案！非常有效，代码如下

这是由于tabs对href重载的的问题导致，因此我们需要将href更改为其它自定义的属性即可避免此问题的发生。

解决方法如下：

第一步页面端：

循环体开始

 @n.Title
循环体结束

将href="@n.Url" 更改为：ghref="@n.Url"

更改后为：

循环体开始

 @n.Title
循环体结束

第二步JS端：

function InitLeftMenu() {
$('.easyui-accordion li a').click(function(){
var tabTitle = $(this).text();
var url = $(this).attr("href");
addTab(tabTitle,url);
$('.easyui-accordion li div').removeClass("selected");
$(this).parent().addClass("selected");
}).hover(function(){
$(this).parent().addClass("hover");
},function(){
$(this).parent().removeClass("hover");
});
}

看红色部分：将var url = $(this).attr("href");更改为：var url = $(this).attr("ghref"); 即可

8. 参考大牛的方法在我项目的改动前后如下

function InitLeftMenu() {

    $(".easyui-accordion").empty();
    var menulist = "";

    $.each(_menus.menus, function(i, n) {
        menulist += '<div title="'+n.menuname+'"  icon="'+n.icon+'" style="overflow:auto;">';
        menulist += '<ul>';
        $.each(n.menus, function(j, o) {//下面的href改成fhref
            menulist += '<li><div><a target="mainFrame" href="' + o.url + '" ><span class="icon '+o.icon+'" ></span>' + o.menuname + '</a></div></li> ';
        })
        menulist += '</ul></div>';
    })

    $(".easyui-accordion").append(menulist);

    $('.easyui-accordion li a').click(function(){
        var tabTitle = $(this).text();
        var url = $(this).attr("href");
        addTab(tabTitle,url);
        $('.easyui-accordion li div').removeClass("selected");
        $(this).parent().addClass("selected");
    }).hover(function(){
        $(this).parent().addClass("hover");
    },function(){
        $(this).parent().removeClass("hover");
    });

    $(".easyui-accordion").accordion();
}

改变后

//初始化左侧
function InitLeftMenu() {

    $(".easyui-accordion").empty();
    var menulist = "";

    $.each(_menus.menus, function(i, n) {
        menulist += '<div title="'+n.menuname+'"  icon="'+n.icon+'" style="overflow:auto;">';
        menulist += '<ul>';
        $.each(n.menus, function(j, o) {//下面的href改成ghref
            menulist += '<li><div><a target="mainFrame" ghref="' + o.url + '" ><span class="icon '+o.icon+'" ></span>' + o.menuname + '</a></div></li> ';
        })
        menulist += '</ul></div>';
    })

    $(".easyui-accordion").append(menulist);

    $('.easyui-accordion li a').click(function(){
        var tabTitle = $(this).text();
        var url = $(this).attr("href");
        var url = $(this).attr("ghref");//获取ghref，解決tab切換頁面不匹配問題
        addTab(tabTitle,url);
        $('.easyui-accordion li div').removeClass("selected");
        $(this).parent().addClass("selected");
    }).hover(function(){
        $(this).parent().addClass("hover");
    },function(){
        $(this).parent().removeClass("hover");
    });

    $(".easyui-accordion").accordion();
}

上面的解决方式简单粗暴有效，但是问题定位花了不少时间，对于easyui的iframe添加方式继续解读源码中。