IE11富文本兼容——政务系统前端的深渊背景为什么还有 IE11系统要求支持 IE11。为什么不是 Chrome办公电脑全是 Windows 7 IE11单位统一采购不能随便装浏览器部分内部网站只支持 IEActiveX现状Chrome 全球份额 70%但在政务系统里IE11 还是主流。问题1富文本编辑器选择富文本问题有关于ie11的问题 使用2种方案低于ie10使用fceditor高于使用wangeditor策略根据浏览器版本加载不同的编辑器。functiongetIEVersion(){varuanavigator.userAgent;varmsieua.indexOf(MSIE );if(msie0){returnparseInt(ua.substring(msie5,ua.indexOf(.,msie)));}vartridentua.indexOf(Trident/);if(trident0){varrvua.indexOf(rv:);returnparseInt(ua.substring(rv3,ua.indexOf(.,rv)));}return-1;}varieVersiongetIEVersion();if(ieVersion0ieVersion10){// IE9及以下使用 fceditor兼容性好但功能少loadEditor(fceditor);}else{// IE10 和其他浏览器使用 wangeditor功能多loadEditor(wangeditor);}问题两套编辑器两套维护成本。功能不一致用户体验不统一。问题2富文本内容显示异常乱码富文本乱码问题解决现象IE11 下保存的富文本内容在 Chrome 下显示乱码。根因IE11 的富文本编辑器用gbk编码Chrome 用utf-8。解决统一使用 UTF-8。metacharsetUTF-8!-- 或者 --metahttp-equivContent-Typecontenttext/html; charsetUTF-8内容丢失富文本值的问题 富文本问题处理现象IE11 下编辑的富文本保存后部分内容丢失如图片、表格。根因IE11 的innerHTML返回的 HTML 结构和其他浏览器不同。// IE11 下 innerHTML 的问题// Chrome: p文本/p// IE11: P文本/P标签大写// Chrome: img src... alt// IE11: IMG src... alt标签大写// 同时 IE11 可能会添加多余的 style 属性解决保存前做 HTML 标准化。functionnormalizeHTML(html){htmlhtml.replace(/(\/?)(\w)/g,function(match,slash,tag){returnslashtag.toLowerCase();});htmlhtml.replace(/style[^]*/gi,function(style){varkeepStyles[font-size,font-weight,color,text-align];varstylesstyle.replace(/style/i,).replace(/$/,).split(;);varfilteredstyles.filter(function(s){returnkeepStyles.some(function(ks){returns.trim().indexOf(ks)0;});});returnfiltered.length0?stylefiltered.join(;):;});returnhtml;}问题3富文本工具栏控制内控系统富文本控制默认打开菜单栏 richedit只读控制需求根据用户权限控制富文本编辑器的功能。vareditorConfig{toolbar:[]};if(userRoleadmin){editorConfig.toolbar[source,|,bold,italic,underline,strikethrough,|,forecolor,backcolor,|,insertimage,inserttable,|,fontsize,fontfamily];}elseif(userRoleeditor){editorConfig.toolbar[bold,italic,underline,|,insertimage];}else{editorConfig.toolbar[];editorConfig.readonlytrue;}IE11 问题只读模式下IE11 仍然可以编辑内容。解决functionsetReadonly(editor,readonly){if(readonly){editor.disable();if(getIEVersion()0){varbodyeditor.$editor.find(.w-e-text);body.attr(contenteditable,false);}}else{editor.enable();if(getIEVersion()0){varbodyeditor.$editor.find(.w-e-text);body.attr(contenteditable,true);}}}问题4文件上传兼容富文本文件上传问题处理场景在富文本编辑器中上传图片。IE11 问题FormData和XMLHttpRequest在 IE11 下表现不同。functionuploadImage(file,callback){varformDatanewFormData();formData.append(file,file);varxhrnewXMLHttpRequest();if(xhr.upload){xhr.upload.onprogressfunction(e){// 进度条IE11 不支持};}xhr.onloadfunction(){varresult;try{resultJSON.parse(xhr.responseText);}catch(e){result{url:xhr.responseText};}callback(result);};xhr.open(POST,/upload/image);xhr.send(formData);}问题5IE11 下 a 标签问题ie11下a标签问题解决 信任站点添加about:blank现象IE11 下点击链接没反应。根因IE11 的安全策略a hrefjavascript:void(0)被拦截。解决!-- 改为 --ahrefjavascript:;onclickhandleClick()链接/a!-- 或 --ahref#onclickhandleClick();returnfalse;链接/a!-- 信任站点设置 --!-- 把系统域名添加到 IE 的信任站点 --问题6JSON 对象兼容海口海关兼容模式问题处理JSON对象低版本ie没有现象IE11兼容模式下报JSON is not defined。根因IE8 以下没有原生的JSON对象。解决!-- 引入 json2.js 兼容库 --!--[if lt IE 10] script src/static/js/json2.js/script ![endif]--问题7负载均衡下 Session 丢失一体化ie浏览器经过负载查询失败问题分析现象IE 经过负载均衡后查询请求失败。根因IE 的 Cookie 处理机制导致 Session 无法保持。解决Proxy balancer://mycluster BalancerMember http://10.12.30.100:8080 routenode1 BalancerMember http://10.12.30.101:8080 routenode2 ProxySet stickysessionJSESSIONID /Proxy兼容方案总结1. 前端框架选择recommendation:framework:jQuery 3.xui:Bootstrap 3.xeditor:wangEditorIE11 兼容版polyfill:html5shiv respond.js json2.js2. HTML 模板!DOCTYPEhtml!--[if IE]![endif]--htmlheadmetacharsetUTF-8metahttp-equivX-UA-CompatiblecontentIEedgemetanamerenderercontentwebkit!--[if lt IE 9] script src/static/js/html5shiv.min.js/script script src/static/js/respond.min.js/script ![endif]--!--[if lt IE 10] script src/static/js/json2.js/script ![endif]--/head3. CSS 兼容/* IE11 兼容 */_:-ms-fullscreen, :root .ie11-hack{/* 仅 IE11 生效 */}/* 透明背景 */background-color:rgba(0,0,0,0.5);/* IE 用滤镜代替 */filter:progid:DXImageTransform.Microsoft.gradient(startColorstr#80000000,endColorstr#80000000);经验教训1. IE11 不是浏览器是历史遗留问题每次版本迭代都要考虑 IE11相当于背着 10 年前的包袱开发。建议能放弃就放弃不能放弃就降级IE11 用户用简化版。2. 两套方案比一套方案更痛苦低于ie10使用fceditor高于使用wangeditor两套编辑器意味着两套 bug、两套维护。能用一套就别用两套。3. 兼容性测试不能省每次发布前至少在 IE11、Chrome、Edge 三个浏览器上跑一遍核心功能。4. 政务系统的特殊性不是不想升级是升级成本太高不是不想换 Chrome是 IT 策略不允许不是不想用新技术是旧系统不兼容理解业务场景比吐槽技术落后更有用。