總結了一些關於瀏覽器相容性的問題供參考
1.在IE6/7/8下
Object.prototype.toString.apply(null) 返回"[object Object]" Object.prototype.toString.apply(undefined) 同樣返回"[object Object]"
2.IE8以下 JSON是不存在的
解決方法
var str = '{"a":100}'
// 1. JSON.parse : 將JSON格式的字串轉成JSON格式的物件
/*var o = JSON.parse(str);
o.a=200;//{"a":200}
console.log(o.a);
console.log(JSON);*/
//在IE8以下，JSON是不存在的
console.log(eval("("+str+")"))
複製程式碼3.獲取上一個哥哥元素節點，相容所有瀏覽器
function getBrother(curEle) {
var pre = curEle.previousSibling;
while(pre)
{
if(pre.nodeType===1){
return pre;
}
pre = pre.previousSibling;
// pre等於哥哥節點的哥哥節點；
}
}
複製程式碼4.bind傳參的方式和call方法一樣； IE8以下不相容
Function.prototype.myBind = function () {
// this--> fn;
var that = this;
// 如果myBind有第一個引數，那麼指向第一個引數，沒有指向window；
var arg = arguments[0]||window;
// 截圖arguments中從索引1開始之後的項
var ary1 = [].slice.call(arguments,1)
return function () {
// 類陣列轉陣列
var ary2 = [].slice.call(arguments);
// apply 可以傳陣列，concat將陣列連線在一起；
that.apply(arg,ary1.concat(ary2));
}
}
複製程式碼5.低版本ie獲取可視區域寬高
var winW=document.body.clientWidth
var winH=document.body.clientHeight
複製程式碼6.相容瀏覽器獲取可視區域的方法
document.documentElement.clientWidth||docuemnt.body.clientWidth
document.documentElement.clientHeight||docuemnt.body.clientHeight
複製程式碼Ie8以下不相容，window中沒有getComputedStyle這個方法
解決方法
元素.currentStyle.屬性名 //相容IE所有瀏覽器
//只能Ie使用
複製程式碼通過類名（getElementsByClassName）IE8以及以前版本不相容
解決方法：
function getClassNames(classStr,tagName){
if (document.getElementsByClassName) {
return document.getElementsByClassName(classStr)
}else {
var nodes = document.getElementsByTagName(tagName),ret = [];
for(i = 0; i < nodes.length; i++) {
if(hasClass(nodes[i],classStr)){
ret.push(nodes[i])
}
}
return ret;
}
}
function hasClass(tagStr,classStr){
var arr=tagStr.className.split(/\s+/ ); //這個正規表示式是因為class可以有多個,判斷是否包含
for (var i=0;i<arr.length;i++){
if (arr[i]==classStr){
return true ;
}
}
return false ;
}
複製程式碼IE8及IE8以下沒有addEventListener()
解決方法：
//ie支援
attachEvent("onclick",fn)
//事件需加上on
複製程式碼注意：
- attachEvent繫結的事件方法順序是倒序的
- 重複繫結的問題：可以給同一個元素的同一個事件繫結相同的方法
- IE8以上既有addEventListener又有attachEvent
- 函式方法中的this指向window，不指向被繫結的那個元素
box.attachEvent("onclick",fn);
box.attachEvent("onclick",fn);
複製程式碼IE8以下沒有事件物件
box.onclick=function(e){
}
console.log(e) //ie下undefined
複製程式碼解決方法：
IE8及IE8以下可輸出
console.log(window.event);
e=e||window.event;
複製程式碼注意：IE8以下
1. 事件物件裡沒有pageX
box.onclick = function (e) {
e = e || window.event;
e.pageX = e.pageX || e.clientX + document.documentElement.scrollLeft;
}
複製程式碼2. 事件物件裡沒有pageY
box.onclick = function (e) {
e = e || window.event;
e.pageY = e.pageY || e.clientY + document.documentElement.scrollTop;
}
複製程式碼3. 事件物件裡沒有target
box.onclick = function (e) {
e.target = e.target || e.srcElement;
e = e || window.event;
}
複製程式碼IE8沒法阻止事件預設行為
- 無法使用事件物件裡的preventDefault( )
- 可以更改returnValue的屬性值為false，同樣可以阻止事件預設行為
//相容瀏覽器
元素.onclick = function(e){
e = e || window.event;
e.preventDefault = e.preventDefault || function () {
e.returnValue=false;
}
console.log(e);
複製程式碼IE8沒法阻止事件冒泡傳播
無法使用e.stopPropagation( )
- 阻止事件的冒泡傳播: e.stopPropagation()
解決方法：
//IE8及以下就沒有這個e
元素.onclick = function (e) {
e = e || window.event;
e.stopPropagation = e.stopPropagation || function () {
e.cancelBubble=true;
}
e.stopPropagation();
console.log("center")
}
複製程式碼在火狐和IE下，使用setCapture( )可以讓滑鼠和盒子繫結在一起防止滑鼠丟失
注意：
-
要解綁(不然點上就出不來了)！
-
谷歌及其他瀏覽器不能使用！
function up() {
if(this.setCapture){
// releaseCapture ： 解綁元素的事件和滑鼠的關係；
this.releaseCapture();
this.onmousemove=null;
this.onmouseup=null;
}else{
document.body.onmousemove = null;
document.body.onmouseup = null;
}
}
複製程式碼Array.forEach()相容
forEach在ie8中不相容，重寫該方法
if ( !Array.prototype.forEach ) {
Array.prototype.forEach = function forEach( callback, thisArg ) {
var T, k;
if ( this == null ) {
throw new TypeError( "this is null or not defined" );
}
var O = Object(this);
var len = O.length >>> 0;
if ( typeof callback !== "function" ) {
throw new TypeError( callback + " is not a function" );
}
if ( arguments.length > 1 ) {
T = thisArg;
}
k = 0;
while( k < len ) {
var kValue;
if ( k in O ) {
kValue = O[ k ];
callback.call( T, kValue, k, O );
}
k++;
}
};
}
複製程式碼關於IE8中HTML5的一些相容問題
1. HTML5 新增的標籤在 IE8 裡是不受支援，例如：section / main / header / footer等
解決方法：指令碼實現IE8相容
2. background IE8不支援連寫
解決方法： IE8下需要分開寫
3.canvas 畫布在ie8以下不相容
1.移動端中IOS10以上的版本不支援form表單
未完待更新！