IE下面的坑

不间断收集在IE下面的各种坑

1.对于a标签

场景：如果对于a标签只是用于显示且他的href被设置成了javascript:void(0);的话。

悲剧：会触发window的beforeunload事件。

PS:在IE6里面会将长连接给断掉。

解决方式：在标签上面添加一个onclick事件

<a href="javascript:void(0);" onclick="return false;">xxx</a>

2.原生态js获取head

场景：为了兼容各个浏览器，在获取DOM的head的时候，每个浏览器有各自的写法

悲剧：需要兼容各个浏览器

解决方案：

var doc = document;
var head = doc.head || doc.getElementsByTagName('head')[0] || doc.documentElemenet;

3.在IE下面获取到键盘事件

场景：在IE下面获取回车键的事件。

悲剧：由于各个浏览器的处理方式的不同，所以要写兼容性的js代码

解决方案

function fuckIE(e){
    var event = e || window.event;
    // 获取到这个对象的DOM元素
    var target = event.target || event.srcElement;
    // 获取到当前按键的unicode值
    var which = target.which || event.keyCode;

4.获取到浏览器窗口的大小

场景：为了获取到当前浏览器窗口的宽和高

悲剧：对于IE和其他浏览器，支持js获取窗口的宽和高的方法是不一样的

解决方案：兼容性的写法

//对于 chrome,firefox等其他浏览器
var height = document.innerHeight;
var width = document.innerWidth;

// 对于IE6,IE7,IE8
var BSieHeight = document.documentElement.clientHeight || document.body.clientHeight;
var BSieWidth = document.documentElement.clientWidth || document.body.clientWidth;

// 所以兼容性的写法就是
var height = document.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;;
var width = document.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;;

5.对于referer的支持

在IE下面使用javascript做跳转，例如

var win = null;
win = window.open('about:blank','','height=700,width=800,top=100,left=100');
setTimeout(function(){
  win.location.href = "http://xxx.com";
},250);
return false;

这个时候，对于新打开的窗口中的header中的referer就会变成空，为什么呢？

悲剧：因为IE做了清空处理，而其他保留了这个字段。

解决方案:前端通过测试是否是IE，如果是的花，手动添加一个referer

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent) || /MSIE(\d+\.\d+);/.test(navigator.userAgent)){
    var referLink = document.createElement('a');
    referLink.href = url;
    document.body.appendChild(referLink);
    referLink.click();
} else {
    location.href = url;
}

6.判断该浏览器是否是IE

场景：有的时候我们需要判断所在的浏览器是否是IE来写一些兼容性的代码，这个时候就需要判断该浏览器是否是IE了

悲剧：无

解决方案：

1.可以通过判断document.all的返回值来判断该浏览器是否是IE，因为只有在IE（6，7，8，..）中document.all的返回值为true,而其他浏览器的返回值为false

<script type="text/javascript">
    window.onload = function() {
        document.getElementById("info").innerHTML = "!!document.all : " + !!document.all;
    }
</script>
<span id="SPAN1"></span>
<div id="info"></div>

2.如果你使用了jquery作为开发库，这个时候就可以使用jquery提供的判断该浏览器是否是IE，并且还能够获取对应的版本号：

$.browser
$.browser.version

PS:对于IE8，在兼容模式下面，获取到的版本号是7

详细的使用方法请到官网查看：http://api.jquery.com/jQuery.browser/

3.如果你使用到了淘宝的Arale类库，里面提供了插件detector-客户端信息识别模块，功能更加的强大，不仅能够识别出PC浏览器，而且还能够识别出手机端的信息版本

// 判断浏览器
detector.browser.name === "chrome" // true

// 判断浏览器名方法 2.!!detector.browser.ie // false

// 判断老旧浏览器if(detector.browser.ie && detector.browser.version < 8){    alert("你的浏览器太老了。"); }// 判断 Trident 4(IE8) 以下版本浏览器引擎if(detector.engine.trident && detector.engine.mode < 4){    // hack code.}// 收集客户端详细信息detector.browser.name + "/" + detector.browser.fullVersion;

PS：详情的使用方法请查看官网提供的文档：http://aralejs.org/detector/