WEB兼容性之JS
1. 获取iframe的window对象
1 //三种方法 2 window.iframeName 3 4 window.frames[iframeName] 5 6 document.getElementById(iframeId).contentWindow
2. 使用iframe带来的影响
1）iframe的页面内容加载完成触发iframe的onload事件
2）主页面的onload事件，在iframe的onload事件触发后触发
3）iframe在加载过程中，浏览器会一直处于加载状态
我们希望的是iframe不要影响主页面的onload，可以采取的方案：主页面加载完成后，动态插入iframe
3. scrollTop
1 //页面包含DOCTYPE声明时 2 document.documentElement.scrollTop 3 4 //页面不包含DOCTYPE声明时 5 document.body.scrollTop 6 //我们希望的是，所有页面都应包含标准的文档类型定义<!DOCTYPE HTML>
4. 事件目标
1 function eventHander(e) { 2 var e = e || window.event, 3 target; 4 5 //IE下,event对象有srcElement属性,但是没有target属性; 6 //Firefox下,event对象有target属性,但是没有srcElement属性. 7 target = e.target || e.srcElement; 8 9 //To do something 10 }
5. input:radio的onchange事件
IE下onchange事件被触发需要内容改变且失去焦点，而Firefox下的radio，改变了内容就能触发事件；
因此，radio的onchange事件需要用onclick事件来代替。
6. 阻止浏览器默认行为
1 function eventHandler(e) { 2 var e = e || window.event; 3 4 if(e.preventDefault) { 5 //阻止默认浏览器动作(W3C) 6 e.preventDefault(); 7 } else { 8 //IE中阻止函数器默认动作的方式 9 e.returnValue = false; 10 } 11 } 12 13 //或者直接用return false来阻止浏览器默认行为
7. 阻止事件冒泡
1 function eventHandler(e) { 2 var e = e || window.event; 3 4 if (e.stopPropagation) { 5 //支持W3C的stopPropagation()方法 6 e.stopPropagation(); 7 } else { 8 //否则，我们需要使用IE的方式来取消事件冒泡 9 e.cancelBubble = true; 10 } 11 }
8. 屏蔽鼠标选择文本
<div class="selectBox" onselectstart="return false;" style="-moz-user-select:none;">屏蔽双击选中文字的区域</div>
9. 禁用退格键
1 //处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外 2 function forbidBackSpace(e) { 3 4 var ev = e || window.event, //获取event对象 5 elmTarget = ev.target || ev.srcElement, //获取事件源 6 elmType = elmTarget.type || elmTarget.getAttribute('type'), //获取事件源类型 7 vReadOnly = elmTarget.readOnly, //获取作为判断条件的事件类型 8 vDisabled = elmTarget.disabled, 9 keyCode = ev.keyCode || ev.which; //firefox2.0中不支持 event.keyCode 10 11 //处理undefined值情况 12 vReadOnly = (vReadOnly === undefined) ? false : vReadOnly; 13 vDisabled = (vDisabled === undefined) ? true : vDisabled; 14 15 //当敲Backspace键时 16 if (keyCode == 8) { 17 //事件源类型为密码或单行、多行文本的readOnly属性为true或disabled属性为true的，则退格键失效 18 if ((elmType == "password" || elmType == "text" || elmType == "textarea") && (vReadOnly || vDisabled)) { 19 return false; 20 } 21 //事件源类型非密码或单行、多行文本的，则退格键失效 22 if (elmType != "password" && elmType != "text" && elmType != "textarea") { 23 return false; 24 } 25 } 26 } 27 28 //禁止后退键 作用于Firefox、Opera 29 document.onkeypress = forbidBackSpace; 30 31 //禁止后退键 作用于IE、Chrome 32 document.onkeydown = forbidBackSpace;
10. XMLHttpRequest 和 ActiveXObject
1 var xmlHttp = null; 2 3 if (window.XMLHttpRequest) { 4 //If IE7, Mozilla, Safari, and so on 5 xmlHttp = new XMLHttpRequest(); 6 } else if (window.ActiveXObject) { 7 //for IE5.x and IE6. 8 xmlHttp = new ActiveXObject('MSXML2.XMLHTTP.3.0'); 9 } 10 11 xmlHttp.open("GET", yourUrl, true | false); 12 xmlHttp.onreadyStatechange = handler; 13 xmlHttp.send(null); 14 15 //xmlHttp.open("POST", yourUrl, true|false); 16 //如果要传文件或者POST内容给服务器，必须先调用setRequestHeader方法，修改MIME类别 17 //xmlHttp.setRquestHeader("Content-Type", "application/x-www-form-urlencoded"); 18 //xmlHttp.onreadyStatechange = handler; 19 //xmlHttp.send("name=value&someName=blaba"); 20 21 function handler() { 22 if (xmlHttp.readyState == 4) { //响应完成 23 if (xmlHttp.status == 200) { //请求成功 24 var txt = xmlHttp.responseText; 25 //To do something. 26 } 27 } 28 } 29 30 //.abort() 取消http请求 31 //.open(MethodString, Url, AsyncBool默认为true) 32 //.send(formData) 向服务器传递的参数，没有填null 33 34 //Reference 更多关于XMLHttpRequest的信息 35 //http://msdn.microsoft.com/en-us/library/ie/ms535874(v=vs.85).aspx
.Thinking
有时候眼睁睁的看着代码，但是就不知道问题出在哪，殊不知是各种浏览器在捣蛋。了解这些差别和特性，将有助于我们Program Better！