Web前端常见问题及解决方法

Web前端很多问题主要来源于浏览器兼容性问题和某些前端技术自身存在的Bug问题，本文总结了工作中遇到的问题及解决方法。

Easy UI 问题

1、Diaolog缓存引起Dialog内容重复的问题

     今天做项目时，遇到Easy UI  Dialog缓存引起弹窗中的form使用ajax无法保存的问题。发现在定义Dialog的Tab页中打开Dialog后，关闭Tab页，再打开弹窗保存失败。

     出错代码：

    

<div id="dialog-staff" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'"
    style="width: 400px; padding: 10px;">
    <form id="form-staff">
        <table>...</table>        
    </form>
</div>

     经调试代码，发现关闭Tab页之后再打开Dialog，Dialog中的form按id获取时增加了1个，每关闭打开一次增加一个。

     跟踪代码执行情况：

     

       解决方法：在使用ajax给form加载数据前，判定form是否冗余，如存在，则删除冗余form。

        var length = $('#form-staff').length;
        if(length > 1){
            if (isIE() || isIE11()) {
                $("#form-staff").get(1).removeNode(true);
            } else {
                $('#form-staff').get(1).remove();
            }
        }
        
        $('#form-staff').form('clear');

IE浏览器兼容性问题

1、IE不支持remove()方法

     今天做项目的过程中遇到remove在IE浏览器不支持，通过查询资料，发现IE浏览器只支持removeNode方法。

     出错代码：

$('#form-staff').get(1).remove();

IE浏览器控制器错误提示：对象不支持“remove”属性或方法

解决方法：

定义判断浏览器方法，转载自：https://blog.csdn.net/qq_22067469/article/details/86133011

/**
 * 判断是否是IE
 * @returns boolean
 */
function isIE() {
    if (!!window.ActiveXobject || "ActiveXObject" in window) {
        return true;
    } else {
        return false;
    }
}
/**
 * 判断是否是IE11
 * @returns boolean
 */
function isIE11(){
    if((/Trident\/7\./).test(navigator.userAgent)) {
        return true;
    } else {
        return false;
    }
}

在使用remove方法的地方先判断浏览器是否为IE。

        if(length > 1){
            if (isIE() || isIE11()) {
                $("#form-staff").get(1).removeNode(true);
            } else {
                $('#form-staff').get(1).remove();
            }
        }