跨浏览器JavaScript意味着编写能够在不同浏览器上运行的代码，这是JavaScript编程时最常见的问题之一。不同浏览器可能支持不同的JavaScript版本或API，因此代码运行在一个浏览器上可能会出错在另一个浏览器上，这给一些开发者带来了很大的困扰。
为了解决这个问题，我们需要编写跨浏览器的JavaScript代码。这些代码使用的API和语法应该被尽可能的兼容各种浏览器。
在JavaScript代码块顶部使用“use strict”语句启用严格模式。严格模式可以提高代码质量，减少潜在的错误，并且可以避免一些不兼容的代码麻烦。使用严格模式应该成为你编写JavaScript代码时的一种习惯。
'use strict';
不同的浏览器支持不同的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';
}
缺少新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!');
}
本文链接：http://task.lmcjl.com/news/10175.html