Repository files navigation

在浏览器上开发的一些坑总结

1. console 的支持情况，在ie8/9 下如果不打开debug 调试器，则会报错，参看console 支持情况

2. input 事件问题，input事件是在ie9+ 支持的，但是在遇到ie10/11 情况下，定义了placeholder 属性时，输入框聚焦或者离开焦点时都会派发input 事件，以及代码去赋值placeholder 也会如此，所以这种情况下，还是使用keydown 事件来代替处理更好些

3. ie 下ajax 的get 请求会被缓存返回304，打开调试器就不会，处理方式：1. 请求地址追加时间戳 2. 服务端设置Response Body 消息头Cache-Control:max-age=0

4. ie 下容器里包含一个disabled 元素，这个元素还是能触发click 事件，示例查看http://output.jsbin.com/hukozi/13

5. ie9/10 下有时元素的clientHeight 为0 ，原因http://www.satzansatz.de/cssd/onhavinglayout.html

6. ie8/9 跨域Ajax 问题限制，因为在ie8/9 使用XDomainRequest 而不是XMLHttpRequest，导致一些限制Detail

   • 只能是GET/POST
   • POST 请求时，传输数据Content-type 必须是text/plain
   • 只能是HTTP/HTTPS
   • 协议调用必须相同
   • 只能是异步

7. 当元素高度为0 时，它父元素的scrollWidth 在不同浏览器值不一样，示例查看https://stackoverflow.com/questions/45809092/element-scrollwidth-value-different-in-ie-chrome-firefox

8. `JavaScript` 处理数字问题

   问题场景

   前端页面通过ajax 请求获取序列值，服务端返回的是Long 型数值20171024005229743，这时前端获取转化成Number 时就变成20171024005229744

   示例

   +'20171024005229743'//output 20171024005229744

   JavaScript 里的Number 是采用双精度浮点型 (IEEE-754 double-precision floating-point format numbers)

   它有一个安全整数范围-(2^53 - 1) ~ (2^53 - 1) 即± 9007199254740991，当超过这个范围后就不安全了

   示例

   9007199254740993===9007199254740992// output true

   在ECMAScript 2015 提供了Number.MAX_SAFE_INTEGER/MIN_SAFE_INTEGER/isSafeInteger() 来进行安全整形判断

   在Java 里,Integer 整形范围-(2^31 - 1) ~ 2^31 - 1,Long 长整型范围-(2^63 - 1) ~ 2^63 - 1

   因此服务端对应如果要做JSON 对象传递前台时，长整型需要转成字符串返回

9. `IE8` 下事件对象不会传递到 `setTimeout` 函数里

   示例

   $('button').on('click',function(e){setTimeout(function(){// 这里 e.originalEvent 获取是空对象，访问里面属性报错 Member not found.console.log(e.originalEvent);},100);})

   这个时候在IE8 下要做对象深拷贝处理

   $('button').on('click', function(e) {  + var copyE = $.extend(true, {}, e);  setTimeout(function() {    console.log(copyE.originalEvent);  }, 100);})

10. IE8/9 下引用样式文件问题，示例查看https://github.com/makandra/ie-css-test

    • CSS 选择器限制，在IE8/9 下当选择器条目超过4095 时，后面的样式选择器不再生效
    • CSS 文件限制，在IE8/9 下当引入的CSS 文件大于31 时，后面引入的样式文件不在生效