这次给大家带来javascript关于ie8兼容问题的处理，javascript关于ie8兼容问题处理的注意事项有哪些，下面就是实战案例，一起来看一下。
最初对做兼容性的认知只停留在ui层面，但其实ui层面都还好，因为毕竟你可以直接看得见现象，更为重要的是在javascript层面，因为这个部分涉及到功能性，前者最多是体验性的问题。下面扯一下这几天遇到的ie8相关的兼容性问题。
1.所有$.ajax失效刚开始看到的现象是ie8/9页面切到了留言页面，没有进入正常流程。打开fiddler都没抓到请求，奇怪了，打出$.ajax error方法中的返回值。xhr.status的值都是0,原来请求没有发出去。心想：怎么没有发出去呢，难道是跨域问题，不对啊，服务端已经允许跨域了。后来一查(ie8/9下的跨域资源请求)，原来请求被ie8/9阻止了，所以服务端允许跨域了也没有用。当时网上有两种办法，1个是设置浏览器，允许通过域访问数据源。2个是加入一个js插件，也就是让ie8/9/10走ie自己支持的xdomainrequest发送请求。第一个方法只能玩玩，不可能让用户去操作套路那么深的步骤。第二个方法github上有两套js。
https://github.com/moonscript/jquery-ajaxtransport-xdomainrequest
https://github.com/jaubourg/ajaxhooks/blob/master/src/xdr.js
引用后都不用改代码，刚开始还有点小激动。
<!--[if (ie 8)|(ie 9)]><script src="js/jquery.xdomainrequest.js"></script><![endif]-->
加上去一看，请求发过去了，界面进入了正常流程。but，又发现返回的值不对，说与服务端，服务端说你的值没传过来，怎么可能，代码都没动，原来这个xdomainrequest是参数走的header，先天性缺少contenttype，没有参数的请求返回是正确的，有参数的后台就没有读到。又寻思着难道要后台改代码，支持一下这种方式？我迟疑了。然后就到群里和队友们讨论下。大家给出的方案就是，用nginx配置个代理就好了。啊，一时激动的有点难以言表。绕了一大圈，啥都不用改，服务器上配置下就好了。因为，既然是跨域问题，最根本的方法就是让它不用跨域了。这种前后端分离的架构，网站(html)和api都是不同的域名.
location /api/-real--forwarded-//./api/;  }
所以这才是最佳解决方案。当时就想，自己对跨域的认知不足，遇到问题都是横向的找办法，没有往上层想。还是有给力的队友。这个问题stackoverflow也有讨论：
http://stackoverflow.com/questions/10232017/ie9-jquery-ajax-with-cors-returns-access-is-denied
http://stackoverflow.com/questions/3362474/jquery-ajax-fails-in-ie-on-cross-domain-calls
2.消息怎么变长了这个问题的现象看起来很神奇，用户在ie8上发送长消息(比如1000字)开始能显示在对话框中，但是一刷新就没了。别的浏览器刷新后长消息都还在。我打开日志，ajax是进入了成功回调，但是返回值有文字提示:'消息过长被阻止'。也就是说我看成功回调了就立马显示到界面上了，但是并没有成功，所以刷新之后拿不到那条消息。ajax的succes只是代表请求成功，并不代表调用api对了。这是我犯得低级错误，没有和api同事确认。但为什么消息会变长呢，一开始把字数调500,ie8能够发了。说明请求确实变长了。打开日志发现。汉字都被转码了。比如：
var data={name:博客园}      alert(json.stringify(data));
ie8会得到
也就是说本质上是json转义的问题。之前给ie8加了一个json2.
<!--[if ie 8]><script src="json2.min.js"></script><![endif]-->
看来还不行。换成json3，1000字也正常了。
<!--[if ie 8]><script src="json3.min.js"></script><![endif]-->
3.flash检测如果你想准确的判断用户的ie到底有没flash。得用swfobject对象。
/*!    swfobject v2.3.20130521 <http://github.com/swfobject/swfobject>     is released under the mit license <http://www.opensource.org/licenses/mit-license.php>*/var swfobject = function () {    var d = undefined, r = object, t = shockwave flash, z = shockwaveflash.shockwaveflash, q = application/x-shockwave-flash, s = swfobjectexprinst, x = onreadystatechange, q = window, h = document, t = navigator, v = false, x = [], o = [], p = [], k = [], i, p, e, b, l = false, a = false, m, g, j = true, l = false, o = function () { var ad = typeof h.getelementbyid != d && typeof h.getelementsbytagname != d && typeof h.createelement != d, ak = t.useragent.tolowercase(), ab = t.platform.tolowercase(), ah = ab ? /win/.test(ab) : /win/.test(ak), af = ab ? /mac/.test(ab) : /mac/.test(ak), ai = /webkit/.test(ak) ? parsefloat(ak.replace(/^.*webkit\/(\d+(\.\d+)?).*$/, $1)) : false, aa = t.appname === microsoft internet explorer, aj = [0, 0, 0], ae = null; if (typeof t.plugins != d && typeof t.plugins[t] == r) { ae = t.plugins[t].description; if (ae && (typeof t.mimetypes != d && t.mimetypes[q] && t.mimetypes[q].enabledplugin)) { v = true; aa = false; ae = ae.replace(/^.*\s+(\s+\s+\s+$)/, $1); aj[0] = n(ae.replace(/^(.*)\..*$/, $1)); aj[1] = n(ae.replace(/^.*\.(.*)\s.*$/, $1)); aj[2] = /[a-za-z]/.test(ae) ? n(ae.replace(/^.*[a-za-z]+(.*)$/, $1)) : 0 } } else { if (typeof q.activexobject != d) { try { var ag = new activexobject(z); if (ag) { ae = ag.getvariable($version); if (ae) { aa = true; ae = ae.split( )[1].split(,); aj = [n(ae[0]), n(ae[1]), n(ae[2])] } } } catch (ac) { } } } return { w3: ad, pv: aj, wk: ai, ie: aa, win: ah, mac: af } }(), i = function () { if (!o.w3) { return } if ((typeof h.readystate != d && (h.readystate === complete || h.readystate === interactive)) || (typeof h.readystate == d && (h.getelementsbytagname(body)[0] || h.body))) { f() } if (!l) { if (typeof h.addeventlistener != d) { h.addeventlistener(domcontentloaded, f, false) } if (o.ie) { h.attachevent(x, function aa() { if (h.readystate == complete) { h.detachevent(x, aa); f() } }); if (q == top) { (function ac() { if (l) { return } try { h.documentelement.doscroll(left) } catch (ad) { settimeout(ac, 0); return } f() }()) } } if (o.wk) { (function ab() { if (l) { return } if (!/loaded|complete/.test(h.readystate)) { settimeout(ab, 0); return } f() }()) } } }(); function f() { if (l || !document.getelementsbytagname(body)[0]) { return } try { var ac, ad = c(span); ad.style.display = none; ac = h.getelementsbytagname(body)[0].appendchild(ad); ac.parentnode.removechild(ac); ac = null; ad = null } catch (ae) { return } l = true; var aa = x.length; for (var ab = 0; ab < aa; ab++) { x[ab]() } } function m(aa) { if (l) { aa() } else { x[x.length] = aa } } function s(ab) { if (typeof q.addeventlistener != d) { q.addeventlistener("load", ab, false) } else { if (typeof h.addeventlistener != d) { h.addeventlistener("load", ab, false) } else { if (typeof q.attachevent != d) { g(q, "onload", ab) } else { if (typeof q.onload == "function") { var aa = q.onload; q.onload = function () { aa(); ab() } } else { q.onload = ab } } } } } function y() { var aa = h.getelementsbytagname("body")[0]; var ae = c(r); ae.setattribute("style", "visibility: hidden;"); ae.setattribute("type", q); var ad = aa.appendchild(ae); if (ad) { var ac = 0; (function ab() { if (typeof ad.getvariable != d) { try { var ag = ad.getvariable("$version"); if (ag) { ag = ag.split(" ")[1].split(","); o.pv = [n(ag[0]), n(ag[1]), n(ag[2])] } } catch (af) { o.pv = [8, 0, 0] } } else { if (ac < 10) { ac++; settimeout(ab, 10); return } } aa.removechild(ae); ad = null; h() }()) } else { h() } } function h() { var aj = o.length; if (aj > 0) { for (var ai = 0; ai < aj; ai++) { var ab = o[ai].id; var ae = o[ai].callbackfn; var ad = { success: false, id: ab }; if (o.pv[0] > 0) { var ah = c(ab); if (ah) { if (f(o[ai].swfversion) && !(o.wk && o.wk < 312)) { w(ab, true); if (ae) { ad.success = true; ad.ref = z(ab); ad.id = ab; ae(ad) } } else { if (o[ai].expressinstall && a()) { var al = {}; al.data = o[ai].expressinstall; al.width = ah.getattribute("width") || "0"; al.height = ah.getattribute("height") || "0"; if (ah.getattribute("class")) { al.styleclass = ah.getattribute("class") } if (ah.getattribute("align")) { al.align = ah.getattribute("align") } var ak = {}; var aa = ah.getelementsbytagname("param"); var af = aa.length; for (var ag = 0; ag < af; ag++) { if (aa[ag].getattribute("name").tolowercase() != "movie") { ak[aa[ag].getattribute("name")] = aa[ag].getattribute("value") } } r(al, ak, ab, ae) } else { b(ah); if (ae) { ae(ad) } } } } } else { w(ab, true); if (ae) { var ac = z(ab); if (ac && typeof ac.setvariable != d) { ad.success = true; ad.ref = ac; ad.id = ac.id } ae(ad) } } } } } x[0] = function () { if (v) { y() } else { h() } }; function z(ac) { var aa = null, ab = c(ac); if (ab && ab.nodename.touppercase() === "object") { if (typeof ab.setvariable !== d) { aa = ab } else { aa = ab.getelementsbytagname(r)[0] || ab } } return aa } function a() { return !a && f("6.0.65") && (o.win || o.mac) && !(o.wk && o.wk < 312) } function r(ad, ae, aa, ac) { var ah = c(aa); aa = w(aa); a = true; e = ac || null; b = { success: false, id: aa }; if (ah) { if (ah.nodename.touppercase() == "object") { i = j(ah); p = null } else { i = ah; p = aa } ad.id = s; if (typeof ad.width == d || (!/%$/.test(ad.width) && n(ad.width) < 310)) { ad.width = "310" } if (typeof ad.height == d || (!/%$/.test(ad.height) && n(ad.height) < 137)) { ad.height = "137" } var ag = o.ie ? "activex" : "plugin", af = "mmredirecturl=" + encodeuricomponent(q.location.tostring().replace(/&/g, "%26")) + "&mmplayertype=" + ag + "&mmdoctitle=" + encodeuricomponent(h.title.slice(0, 47) + " - flash player installation"); if (typeof ae.flashvars != d) { ae.flashvars += "&" + af } else { ae.flashvars = af } if (o.ie && ah.readystate != 4) { var ab = c("p"); aa += "swfobjectnew"; ab.setattribute("id", aa); ah.parentnode.insertbefore(ab, ah); ah.style.display = "none"; y(ah) } u(ad, ae, aa) } } function b(ab) { if (o.ie && ab.readystate != 4) { ab.style.display = "none"; var aa = c("p"); ab.parentnode.insertbefore(aa, ab); aa.parentnode.replacechild(j(ab), aa); y(ab) } else { ab.parentnode.replacechild(j(ab), ab) } } function j(af) { var ae = c("p"); if (o.win && o.ie) { ae.innerhtml = af.innerhtml } else { var ab = af.getelementsbytagname(r)[0]; if (ab) { var ag = ab.childnodes; if (ag) { var aa = ag.length; for (var ad = 0; ad < aa; ad++) { if (!(ag[ad].nodetype == 1 && ag[ad].nodename == "param") && !(ag[ad].nodetype == 8)) { ae.appendchild(ag[ad].clonenode(true)) } } } } } return ae } function k(aa, ab) { var ac = c("p"); ac.innerhtml = "<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000'><param name='movie' value='" + aa + "'> + ab + </object>; return ac.firstchild } function u(ai, ag, ab) { var aa, ad = c(ab); ab = w(ab); if (o.wk && o.wk < 312) { return aa } if (ad) { var ac = (o.ie) ? c("p") : c(r), af, ah, ae; if (typeof ai.id == d) { ai.id = ab } for (ae in ag) { if (ag.hasownproperty(ae) && ae.tolowercase() !== "movie") { e(ac, ae, ag[ae]) } } if (o.ie) { ac = k(ai.data, ac.innerhtml) } for (af in ai) { if (ai.hasownproperty(af)) { ah = af.tolowercase(); if (ah === "styleclass") { ac.setattribute("class", ai[af]) } else { if (ah !== "classid" && ah !== "data") { ac.setattribute(af, ai[af]) } } } } if (o.ie) { p[p.length] = ai.id } else { ac.setattribute("type", q); ac.setattribute("data", ai.data) } ad.parentnode.replacechild(ac, ad); aa = ac } return aa } function e(ac, aa, ab) { var ad = c("param"); ad.setattribute("name", aa); ad.setattribute("value", ab); ac.appendchild(ad) } function y(ac) { var ab = c(ac); if (ab && ab.nodename.touppercase() == "object") { if (o.ie) { ab.style.display = "none"; (function aa() { if (ab.readystate == 4) { for (var ad in ab) { if (typeof ab[ad] == "function") { ab[ad] = null } } ab.parentnode.removechild(ab) } else { settimeout(aa, 10) } }()) } else { ab.parentnode.removechild(ab) } } } function u(aa) { return (aa && aa.nodetype && aa.nodetype === 1) } function w(aa) { return (u(aa)) ? aa.id : aa } function c(ac) { if (u(ac)) { return ac } var aa = null; try { aa = h.getelementbyid(ac) } catch (ab) { } return aa } function c(aa) { return h.createelement(aa) } function n(aa) { return parseint(aa, 10) } function g(ac, aa, ab) { ac.attachevent(aa, ab); k[k.length] = [ac, aa, ab] } function f(ac) { ac += ""; var ab = o.pv, aa = ac.split("."); aa[0] = n(aa[0]); aa[1] = n(aa[1]) || 0; aa[2] = n(aa[2]) || 0; return (ab[0] > aa[0] || (ab[0] == aa[0] && ab[1] > aa[1]) || (ab[0] == aa[0] && ab[1] == aa[1] && ab[2] >= aa[2])) ? true : false } function v(af, ab, ag, ae) { var ad = h.getelementsbytagname(head)[0]; if (!ad) { return } var aa = (typeof ag == string) ? ag : screen; if (ae) { m = null; g = null } if (!m || g != aa) { var ac = c(style); ac.setattribute(type, text/css); ac.setattribute(media, aa); m = ad.appendchild(ac); if (o.ie && typeof h.stylesheets != d && h.stylesheets.length > 0) { m = h.stylesheets[h.stylesheets.length - 1] } g = aa } if (m) { if (typeof m.addrule != d) { m.addrule(af, ab) } else { if (typeof h.createtextnode != d) { m.appendchild(h.createtextnode(af +  { + ab + })) } } } } function w(ad, aa) { if (!j) { return } var ab = aa ? visible : hidden, ac = c(ad); if (l && ac) { ac.style.visibility = ab } else { if (typeof ad === string) { v(# + ad, visibility: + ab) } } } function n(ab) { var ac = /[\\\<>\.;]/; var aa = ac.exec(ab) != null; return aa && typeof encodeuricomponent != d ? encodeuricomponent(ab) : ab } var d = function () { if (o.ie) { window.attachevent(onunload, function () { var af = k.length; for (var ae = 0; ae < af; ae++) { k[ae][0].detachevent(k[ae][1], k[ae][2]) } var ac = p.length; for (var ad = 0; ad < ac; ad++) { y(p[ad]) } for (var ab in o) { o[ab] = null } o = null; for (var aa in swfobject) { swfobject[aa] = null } swfobject = null }) } }(); return { registerobject: function (ae, aa, ad, ac) { if (o.w3 && ae && aa) { var ab = {}; ab.id = ae; ab.swfversion = aa; ab.expressinstall = ad; ab.callbackfn = ac; o[o.length] = ab; w(ae, false) } else { if (ac) { ac({ success: false, id: ae }) } } }, getobjectbyid: function (aa) { if (o.w3) { return z(aa) } }, embedswf: function (af, al, ai, ak, ab, ae, ad, ah, aj, ag) { var ac = w(al), aa = { success: false, id: ac }; if (o.w3 && !(o.wk && o.wk < 312) && af && al && ai && ak && ab) { w(ac, false); m(function () { ai += ""; ak += ""; var an = {}; if (aj && typeof aj === r) { for (var aq in aj) { an[aq] = aj[aq] } } an.data = af; an.width = ai; an.height = ak; var ar = {}; if (ah && typeof ah === r) { for (var ao in ah) { ar[ao] = ah[ao] } } if (ad && typeof ad === r) { for (var am in ad) { if (ad.hasownproperty(am)) { var ap = (l) ? encodeuricomponent(am) : am, at = (l) ? encodeuricomponent(ad[am]) : ad[am]; if (typeof ar.flashvars != d) { ar.flashvars += "&" + ap + "=" + at } else { ar.flashvars = ap + "=" + at } } } } if (f(ab)) { var au = u(an, ar, al); if (an.id == ac) { w(ac, true) } aa.success = true; aa.ref = au; aa.id = au.id } else { if (ae && a()) { an.data = ae; r(an, ar, al, ag); return } else { w(ac, true) } } if (ag) { ag(aa) } }) } else { if (ag) { ag(aa) } } }, switchoffautohideshow: function () { j = false }, enableuriencoding: function (aa) { l = (typeof aa === d) ? true : aa }, ua: o, getflashplayerversion: function () { return { major: o.pv[0], minor: o.pv[1], release: o.pv[2] } }, hasflashplayerversion: f, createswf: function (ac, ab, aa) { if (o.w3) { return u(ac, ab, aa) } else { return undefined } }, showexpressinstall: function (ac, ad, aa, ab) { if (o.w3 && a()) { r(ac, ad, aa, ab) } }, removeswf: function (aa) { if (o.w3) { y(aa) } }, createcss: function (ad, ac, ab, aa) { if (o.w3) { v(ad, ac, ab, aa) } }, adddomloadevent: m, addloadevent: s, getqueryparamvalue: function (ad) { var ac = h.location.search || h.location.hash; if (ac) { if (/\?/.test(ac)) { ac = ac.split("?")[1] } if (ad == null) { return n(ac) } var ab = ac.split("&"); for (var aa = 0; aa < ab.length; aa++) { if (ab[aa].substring(0, ab[aa].indexof("=")) == ad) { return n(ab[aa].substring((ab[aa].indexof("=") + 1))) } } } return "" }, expressinstallcallback: function () { if (a) { var aa = c(s); if (aa && i) { aa.parentnode.replacechild(i, aa); if (p) { w(p, true); if (o.ie) { i.style.display = "block" } } if (e) { e(b) } } a = false } }, version: "2.3" } }();
view code
function hasflash() { return swfobject.hasflashplayerversion("1"); }
通过这方法判断是最准确的。
4.图片显示问题1)在https的网站上出现http的请求，浏览器都会给出安全提醒，就ie喜欢弹出来。
这个也还好，微信在ie8中打开也会有这样的提示，除非文件服务器也是https的，不然前端也是没解。如果是在https中请求http的ajax，那直接挂掉。
2)ie8上在界面对大图片设置max-width,会出现把父元素撑得很大而图片显示在一边，留下一大块空白。这个解决办法就是给父类也加个max-width的样式限制一下。
5.socket.io遇到https这是这几天一个严重的问题，到https上，ie8/9都收不到消息。我为之很苦恼，因为socket都显示连接成功了，也订阅消息了,就是没收到消息。这个socket.io号称都支持到ie6的。各种搜索都没有看到过相关问题。我有个经验，如果一个问题，你搜了很都没有找到类似的问题，可能有两点，要么这是个很傻的问题，哪个地方设置下就好了，要么就是个很偏很冷门的问题。但是明显前者的可能性更大。
socket = io('/', { 'transports': ['websocket', 'polling'] }); socket.on("connect", function () { console.log('连接成功') }); //监听频道 socket.on('messages', function (res) { console.log("收到消息",res); });
其实在http上的测试环境ie8是ok的，有一天晚上突然调通了，我还高兴的备份了代码回家睡了个好觉，第二天一来打开一看，懵逼了，还是不行。难道是幻觉，昨天还在群里和队友说好了，真是啪啪啪的打脸。然后再也没通过了。其实socket.io的调用代码很简单，就那么几句。我再怎么摆弄也没啥用。最后还是没办法，在ie8/9上面切到了传统的轮询。这个问题最后还是没有解决，同事说可能是f5或者https的安全协议引起的。
6.不支持数组的indexof如果是现代浏览器我们可以通过indexof来判断一个元素是否存在于数组
if (!~loadmesg.indexof(json.msgid))
但ie8不支持。得改成for循环。
7.隐藏元素初始化上传插件失败上传的时候使用的是plupload插件，但如果目标元素是隐藏的，ie8上初始化会无效。
8.ie标准模式失效我们可以用mate来指定ie8的渲染方式：
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
但我发现无论我怎么加，都是以ie7的方式打开的。然后就重新做了简单的也没，只有meta和文字，发现是有效果的，也就是说页面上的某些原因导致ie8又自己切换到了ie7的兼容模式
然后拿掉就可以了。之前这么写是为了添加一个过渡的样式。没想到造成了这种影响。只有再换一种方式实现。
9.jquery的一种写法不支持
var $a = $('<a target="_blank" class="' + c + '" href=' + rightdata[i].customerrightnavlink + '></a>');            var img = '<img src=' + rightdata[i].customerrightnavimage + ' />';             $a.html(img);             $(.hold).append($a);
引用的是jquery1.11.3 在ie8中会报错。修改如下：
var str = '<a target="_blank" class="' + c + '" href=' + rightdata[i].customerrightnavlink + '><img src=' + rightdata[i].customerrightnavimage + ' /></a>'             $(.hold).append(str);
小结：做兼容性也是为了体验性和稳定性，每一个异常现象背后都是对一些基础知识的考验，以前做网站基本上都是一个人从头做到位，跨域问题几乎都没遇到过，兼容性上也没有死磕。现在正经做前端几个月了，感觉做兼容性是每个前端的必备课，后端都知道现代浏览器方便好用，但是你写代码是为了服务用户的，不是方便自己，再者，做兼容性确实考验各方面的知识，最好前端还是要懂后端的以及网络方面的知识。这样遇到问题的时候不至于茫然无措，因为前端看到的现象已经是异常的最后面目，你要分析找出最根本的原因，然后找对应的同事帮忙解决
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
微信分享功能的开发
公众号支付接口的开发
h5的缓存manifest的使用
以上就是javascript关于ie8兼容问题的处理的详细内容。