JavaScript--兼容问题总结
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript--兼容问题总结相关的知识，希望对你有一定的参考价值。
一.window.navigator浏览器信息
1 <script> 2 console.log(window.navigator); 3 // 用户浏览器的类型 到底是 谷歌还是火狐，ie等 4 console.log(window.navigator.userAgent); 5 // 判断浏览器所在的系统平台类型 ，window还是mac 6 console.log(window.navigator.platform); 7 </script>
二.查找页面元素的几种方式
1 <script> 2 window.onload = function () { 3 // 无兼容问题放心使用 4 // 1) 通过id查找元素，获取到匹配的第一个id元素 5 // var btn = document.getElementById(‘btn‘); 6 // console.log(btn); 7 // 2) 通过标签名称查找元素，获取到的是伪数组 8 // var buttons = document.getElementsByTagName(‘button‘); 9 //// 伪数组不能调用数组里的全部方法和属性 10 //// console.log( buttons.push("123") ); // 报错 11 // console.log( buttons ); 12 13 // 了解：兼容问题 ie 9+ 14 // 3) 通过类名查找元素，获取到的是伪数组 ie 9+ 15 // var btnClass = document.getElementsByClassName("btn-class"); 16 // console.log(btnClass); 17 18 // 4) 通过name属性查找元素，获取到的是伪数组 19 // name标准用法应该是表单的，如提交表单数据时，name是作为数据的key 20 // var btnName = document.getElementsByName(‘btn-name‘); 21 // console.log(btnName); 22 23 // 5) 通过合法的css选择器去查找到第一个元素 24 // var query1 = document.querySelector("#btn"); 25 // var query1 = document.querySelector("[name=‘btn-name‘]"); 26 // console.log(query1); 27 // 28 // 6) 通过合法的css选择器去查找到所有元素（做手机项目的时候常用） 29 // var query2 = document.querySelectorAll("#btn"); // 不推荐用这种方式找id 30 var query2 = document.querySelectorAll(".btn-class"); 31 console.log(query2); 32 33 } 34 </script>
三.innerText、innerhtml、textContent兼容问题
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script> 7 /** 8 * innerHTML 9 * 全部浏览器都兼容 10 * innerText firefox45+后支持 11 * ie,chrome,opera,safari,firefox45+ 12 * textContent ie9+ 13 * firefox,chrome, ie9+ 14 * 15 * */ 16 window.onload = function () { 17 var btns = document.getElementsByTagName(‘button‘); 18 var uls = document.getElementsByTagName(‘ul‘); 19 btns[0].onclick = function () { 20 // 如果innerText获取到不是undefined，说明兼容innerText 21 if( uls[0].innerText !== undefined ){ 22 uls[0].innerText = "123"; 23 }else{ 24 // 其他情况：如低版本获取用另一种方式修改 25 uls[0].textContent = "低版本火狐修改"; 26 } 27 } 28 29 } 30 </script> 31 </head> 32 <body> 33 <button>换一换新闻</button> 34 <ul> 35 <li>牛大</li> 36 <li>拉面的老板去参加比赛了</li> 37 </ul> 38 </body> 39 </html>
四.注册事件的三种方式、解绑事件的兼容方式
1.注册事件的三种方式
1 <script> 2 window.onload = function () { 3 4 /** 5 * 一、事件三要素 6 * 事件源 7 * 事件类型 8 * 事件处理程序 9 * 10 * 11 * 二、注册事件三种方式 12 * 第一种： 13 * 事件源.on事件类型 = 事件处理程序 14 * 第二种： ie8不支持 15 * 事件源.addEventListener(‘事件类型‘,事件处理程序,false) 16 * 第三种： chrome、Firefox、Safari、ie11都不支持，ie6~10支持 17 * 事件源.attachEvent(‘on事件类型‘,事件处理程序) 18 * 19 * */ 20 var btn = document.getElementById(‘btn‘); 21 22 // 第一种：快速注册事件 23 // btn.onclick = function () { 24 // alert("我们给按钮添加了一个事件"); 25 // } 26 27 28 // 第二种：事件监听 不支持ie8 29 // 事件源.addEventListener(‘事件类型‘,事件处理程序) false是事件冒泡（默认） true是事件捕获 30 btn.addEventListener(‘click‘,function () { 31 alert("我们给按钮添加了一个事件"); 32 }); 33 34 btn.addEventListener(‘click‘,function () { 35 alert("AAAAAAA"); 36 },false); 37 38 39 // 第三种：事件监听 Chrome、Firefox、Safari,ie11都不支持,ie6~10支持 40 // btn.attachEvent(‘onclick‘,function () { 41 // alert("我们给按钮添加了一个事件"); 42 // }); 43 // btn.attachEvent(‘onclick‘,function () { 44 // alert("我们给按钮添加了一个事件2222"); 45 // }); 46 // btn.attachEvent(‘onclick‘,function () { 47 // alert("我们给按钮添加了一个事件3333"); 48 // }); 49 50 51 52 } 53 </script>
事件注册兼容处理：
1 <script> 2 /* 3 谷歌和ie8注册方式不同， 4 所以我们要进行判断支持哪种注册方式，就使用哪种注册方式添加事件 5 */ 6 function myEventListener(element,type,fn) { 7 if( element.addEventListener ){ 8 element.addEventListener(type,fn); 9 }else if( element.attachEvent ){ 10 element.attachEvent("on"+type,fn); 11 }else{ 12 element["on"+type] = fn; 13 } 14 } 15 myEventListener(btn,‘click‘,function () { 16 alert("兼容版的事件注册方式"); 17 }); 18 </script>
2.解绑事件的兼容方式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script> 7 window.onload = function () { 8 /** 9 * 一、事件三要素 10 * 事件源 11 * 事件类型 12 * 事件处理程序 13 * 14 * 15 * 二、注册事件三种方式 16 * 第一种： 17 * 事件源.on事件类型 = 事件处理程序 18 * 第二种： ie8不支持 19 * 事件源.addEventListener(‘事件类型‘,事件处理程序,false) 20 * 第三种： chrome不支持 21 * 事件源.attachEvent(‘on事件类型‘,事件处理程序) 22 * 23 * 24 * 三、事件解绑 25 * 第一种： 26 * 事件源.on事件类型 = null 27 * 第二种： ie8不支持 28 * 事件源.removeEventListener(‘事件类型‘,事件处理程序,false) 29 * 第三种： chrome不支持 30 * 事件源.detachEvent(‘on事件类型‘,事件处理程序) 31 * 32 * 33 * */ 34 var btn = document.getElementById(‘btn‘); 35 var btn2 = document.getElementById(‘btn2‘); 36 // 事件注册兼容方式 37 function myEventListener(element,type,fn) { 38 // 主流浏览器注册方式 39 if( element.addEventListener ){ 40 element.addEventListener(type,fn,false); 41 // 42 }else if( element.attachEvent ){ 43 element.attachEvent("on"+type,fn); 44 }else{ 45 element["on"+type] = fn; 46 } 47 }// 事件解绑兼容方式 48 function myRemoveEventListener(element,type,fn) { 49 if( element.removeEventListener ){ 50 element.removeEventListener(type,fn,false); 51 }else if( element.detachEvent ){ 52 element.detachEvent("on"+type,fn); 53 }else{ 54 element["on"+type] = null; 55 } 56 } 57 58 function fn() { 59 alert("兼容版的事件注册方式"); 60 } 61 myEventListener(btn,‘click‘,fn); 62 // 独立fn是为了浏览器能区分每个事件注册 63 btn2.onclick = function () { 64 myRemoveEventListener(btn,‘click‘,fn); 65 } 66 67 console.log( btn.addEventListener ); 68 console.log( btn.attachEvent ); 69 70 } 71 </script> 72 </head> 73 <body> 74 <button id="btn">按钮</button> 75 <button id="btn2">解绑事件</button> 76 </body> 77 </html>
五.event事件对象兼容问题
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script> 7 /** 8 * 9 * 事件对象兼容写法： 10 * event IE不兼容 window.event火狐(Firefox 不支持) 11 * event = event || window.event; 12 * 13 * 事件目标元素兼容写法： 14 * event.target IE9.0版本才开始支持 15 * event.srcElement 火狐(Firefox 不支持) 16 * event.target = event.target || event.srcElement; 17 * 18 * 19 * */ 20 21 window.onload = function () { 22 var btn = document.getElementById(‘btn‘); 23 btn.onclick = function (event) { 24 // console.log(event); 25 // console.log(window.event); 26 event = event || window.event; // 短路写法 27 event.target = event.target || event.srcElement; // 短路写法 28 // event.target 29 console.log( event.target ); 30 console.log( event.srcElement ); 31 } 32 33 } 34 </script> 35 </head> 36 <body> 37 <button id="btn">按钮</button> 38 </body> 39 </html>
目前暂时那么多，遇到就更新！
以上是关于JavaScript--兼容问题总结的主要内容，如果未能解决你的问题，请参考以下文章