javascript下4个跨浏览器必备的函数

JavaScript是一种脚本语言，用于向Web页面添加交互性。然而，不同的浏览器实现JavaScript时会有一些差异，这可能会导致一些代码在某些浏览器中不起作用。因此，编写跨浏览器兼容的JavaScript代码非常重要。在这里，我们介绍4个跨浏览器必备的函数。

1. 跨浏览器设置事件处理程序

在JavaScript中，添加事件处理程序是相当常见的。但是，不同浏览器处理事件的方法不同。为了兼容不同的浏览器，我们需要编写以下跨浏览器设置事件处理程序的函数：

function addEvent(elem, eventType, handler) {
  if (elem.addEventListener) {
    elem.addEventListener(eventType, handler, false);
  } else if (elem.attachEvent) {
    elem.attachEvent("on" + eventType, handler);
  } else {
    elem["on" + eventType] = handler;
  }
}

这个函数可以向任何元素添加事件处理程序。它先检查浏览器是否支持addEventListener方法。如果支持，则使用它来添加事件处理程序。否则，它会检查是否支持attachEvent方法。如果支持，则使用它来添加事件处理程序。否则，它会使用DOM级别0事件处理程序来添加处理程序。

以下是向按钮添加点击事件处理程序的示例代码：

var myButton = document.getElementById("myButton");
addEvent(myButton, "click", function() {
  alert("Button clicked!");
});

2. 跨浏览器获取XMLHttpRequest对象

XMLHttpRequest对象用于在后台与服务器交换数据。不同的浏览器实现XMLHttpRequest对象时只是命名不同。以下是一个跨浏览器获取XMLHttpRequest对象的函数：

function createXHR() {
  if (typeof XMLHttpRequest != "undefined") {
    return new XMLHttpRequest();
  } else if (typeof ActiveXObject != "undefined") {
    if (typeof arguments.callee.activeXString != "string") {
      var versions = [
        "MSXML2.XMLHttp.6.0",
        "MSXML2.XMLHttp.3.0",
        "MSXML2.XMLHttp"
      ];
      for (var i = 0; i < versions.length; i++) {
        try {
          new ActiveXObject(versions[i]);
          arguments.callee.activeXString = versions[i];
          break;
        } catch (ex) {
          //跳过
        }
      }
    }
    return new ActiveXObject(arguments.callee.activeXString);
  } else {
    throw new Error("No XHR object available.");
  }
}

这个函数返回一个XMLHttpRequest对象。如果浏览器支持XMLHttpRequest，则返回它。否则，它尝试使用ActiveXObject对象。它试图使用可用的版本之一（6.0、3.0和普通的MSXML2.XMLHttp）。如果都不行，则抛出一个错误。

以下是使用该函数获取XMLHttpRequest对象的示例代码：

var xhr = createXHR();
xhr.open("get", "http://example.com/", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      alert(xhr.responseText);
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
};
xhr.send(null);

上述代码使用该函数创建一个XMLHttpRequest对象，并向http://example.com/发送一个GET请求。当响应返回时，它检查响应的状态码。如果在200到299之间或者是304，则弹出响应文本。否则，它会弹出一个错误信息。

3. 跨浏览器获取视口大小

获取浏览器视口大小是编写可变大小的Web应用程序的关键。以下是一个跨浏览器获取视口大小的函数：

function getViewportSize() {
  if (window.innerWidth) {
    return {
      width: window.innerWidth,
      height: window.innerHeight
    };
  } else {
    if (
      document.compatMode == "BackCompat" ||
      document.compatMode == "QuirksMode"
    ) {
      return {
        width: document.body.clientWidth,
        height: document.body.clientHeight
      };
    } else {
      return {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
      };
    }
  }
}

这个函数返回一个对象，该对象包含视口的宽度和高度。如果浏览器支持window.innerWidth / innerHeight属性，那么使用它们来获取视口大小。否则，检查文档模式。如果文档模式是BackCompat或QuirksMode，则使用document.body.clientWidth / clientHeight属性来获取视口大小。否则，我们使用document.documentElement.clientWidth / clientHeight属性。

以下是使用该函数获取视口大小的示例代码：

var viewportSize = getViewportSize();
alert("Viewport width: " + viewportSize.width);
alert("Viewport height: " + viewportSize.height);

上述代码使用该函数获取视口大小并显示其宽度和高度。

4. 跨浏览器获取文档滚动位置

在Web页面上实现一些特定的交互操作时，您可能需要获取文档的滚动位置。以下是一个跨浏览器获取文档滚动位置的函数：

function getScrollOffsets() {
  if (window.pageXOffset) {
    return {
      x: window.pageXOffset,
      y: window.pageYOffset
    };
  } else {
    return {
      x: document.documentElement.scrollLeft,
      y: document.documentElement.scrollTop
    };
  }
}

这个函数返回一个包含文档滚动位置的x和y属性的对象。如果浏览器支持window.pageXOffset / pageYOffset属性，则使用它们来获取滚动位置。否则，使用document.documentElement.scrollLeft / scrollTop属性来获取滚动位置。

以下是使用该函数获取文档滚动位置的示例代码：

var scrollOffsets = getScrollOffsets();
alert("Scroll offset x: " + scrollOffsets.x);
alert("Scroll offset y: " + scrollOffsets.y);

上述代码使用该函数获取文档的滚动位置并显示其水平和垂直滚动位置。

这是4个跨浏览器必备的函数，并且在编写能够兼容所有主流浏览器的Web应用程序时非常有用。