Currently we are compatible with IE9, when writing the system will encounter some potholes. So just to record a little bit.

  • Disabled attributes

The disabled attribute is added to some non-form nodes, and styles change under IE9.

  • The type attribute

Often adding a type=”1″,type=”2″ to a DOM node such as a button will work fine in Chrome and result in ie9 using getAttribute(‘type’) or $(..). .attr(‘type’) is not running properly.

  • event = window.event || event

I recently tracked a bug where some attributes in the event could not be read and found the problem was caused by this code. Window.event may have changed after code execution has passed. So should be rewritten into: event | | window. The event.

In theory, this kind of selection judgment should be based on the principle of higher priority. See if the powerful ones exist first, and then consider the lower ones. Because some browsers may be both advanced and low-level. Such as the document. The addEventListener and document. AttachEvent.

  • console

I met IE9 before the system can not run, but open the console to debug, see where the problem is, and can run normally, this also how to play? In IE9 and IE8, the console object does not exist when the console is not opened. If you call console.log, an error will be reported, causing js to fail to run.

At this point we may need to debug without opening the console: github.com/liusaint/Ja…

In addition, try not to console. Log things out of the online environment. Consider wrapping the native console.log:

function log(){
    if('dev'= =window.environment){
        console.log.apply(console.arguments);
    }    
}
log(1.2);/ / 1, 2Copy the code

There will be no output from the formal environment. Also, to prevent potential console.log output from other colleagues. The following insurance codes can be added. Of course, there may actually be other methods under console that need to be handled as well.

if(!window.console){
    window.console = {};
    window.console.log = function(){}}Copy the code

  • IE9 does not support Flex

  • Internet Explorer 9 does not support FileReader

  • A The label triggers the onbeforeUnload event

That doesn’t happen very often, depending on the probability. Our A tag fires the window. onbeforeUnload event even with javascript:void:(0), but the page doesn’t actually jump. Preventdefault () if the href is javascript, prevent the default event.preventdefault(); But the actual effect is not so effective, especially the a tag added later. For example, the generated AJAX page a tag doesn’t even work with jQuery’s on method proxy. Only bind a separate click event to each paginated A tag to prevent the default event.preventDefault ();

  • IE9 Canvas cross-domain issues such as canvas.todataURL ()

It is common to see images in a different domain than a web page. Then some methods of Canvas will encounter cross-domain problems when extracting edited picture data. Such as canvas’s toDataURL() method. Other browsers can use the server to configure CORS cross domain plus img.crossOrigin=”anonymous” to solve the problem, but IE9 does not, so some functions under IE9 need to be done by the back end, such as image rotation, in IE9 still obedient pass Angle to the back end. Or just drop some features in IE9.

  • LocalStorage pit

Say it out you may not believe, localStorage in IE occasionally loose will appear, two tabs, exactly the same url, read out localStorage is not the same situation. (Page after repeated refresh, please do not doubt my operation.) This pit was discovered because of some strange bugs in a recent project that required a lot of caching and made a lot of use of localStorage. Many colleagues with years of experience say they have never encountered such a bizarre bug.

It has to be functional, and it has to be compatible, so the front end is not good.

So let me do that.