编写跨浏览器的javascript代码必备[js多浏览器兼容写法]

编写跨浏览器的JavaScript代码必备-完整攻略

什么是跨浏览器JavaScript？

跨浏览器JavaScript意味着编写能够在不同浏览器上运行的代码，这是JavaScript编程时最常见的问题之一。不同浏览器可能支持不同的JavaScript版本或API，因此代码运行在一个浏览器上可能会出错在另一个浏览器上，这给一些开发者带来了很大的困扰。

为了解决这个问题，我们需要编写跨浏览器的JavaScript代码。这些代码使用的API和语法应该被尽可能的兼容各种浏览器。

编写跨浏览器的JavaScript的方法

1. 使用严格模式

在JavaScript代码块顶部使用“use strict”语句启用严格模式。严格模式可以提高代码质量，减少潜在的错误，并且可以避免一些不兼容的代码麻烦。使用严格模式应该成为你编写JavaScript代码时的一种习惯。

'use strict';

1. 检查浏览器

不同的浏览器支持不同的JavaScript版本和API。我们需要检测当前运行代码的浏览器并根据它编写可兼容的代码。这里有一个检查浏览器类型的代码段:

var browser = '';
if ((navigator.userAgent.indexOf('Opera') || navigator.userAgent.indexOf('OPR')) != -1 ) {
    browser = 'Opera';
} else if (navigator.userAgent.indexOf('MSIE') != -1 || !!document.documentMode == true ) {
    browser = 'IE';
} else if (navigator.userAgent.indexOf('Chrome') != -1 ) {
    browser = 'Chrome';
} else if (navigator.userAgent.indexOf('Safari') != -1) {
    browser = 'Safari';
} else if (navigator.userAgent.indexOf('Firefox') != -1 ) {
    browser = 'Firefox';
} else {
    browser = 'unknown';
}

1. 使用polyfill填充器

缺少新API或JavaScript语法支持的旧浏览器可以使用polyfill进行填充，以确保代码在所有浏览器上都能够执行。Polyfill是一个JavaScript库，用于实现浏览器不支持的API或语法，让代码能够在这些浏览器上正常运行。有很多流行的Polyfill库，包括ES5和ES6的Polyfill。

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

示例

示例1：按键事件兼容

下面代码展示了如何使用浏览器异构对按键事件进行兼容：

var event = event || window.event;
var keyCode = event.which || event.keyCode;

在IE浏览器中，按键事件使用event.keyCode表示按下的键的值，在其他浏览器中，该值是event.which

示例2：兼容AJAX请求

AJAX请求在不同浏览器中的实现有所不同，有些浏览器支持创建“ActiveXObject”，有些浏览器则支持创建“XMLHttpRequest”对象。下面是一种使用异构机制来适应浏览器的兼容方式:

var xmlhttp;
if (window.XMLHttpRequest) {       
    xmlhttp = new XMLHttpRequest();       
} else if (window.ActiveXObject) { 
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');       
} else {       
    alert('Your browser does not support XMLHTTP!');
}