WEB兼容性之JS

1. 获取iframe的window对象

 //三种方法

 window.iframeName

 window.frames[iframeName]

 document.getElementById(iframeId).contentWindow

2. 使用iframe带来的影响

1）iframe的页面内容加载完成触发iframe的onload事件

2）主页面的onload事件，在iframe的onload事件触发后触发

3）iframe在加载过程中，浏览器会一直处于加载状态

我们希望的是iframe不要影响主页面的onload，可以采取的方案：主页面加载完成后，动态插入iframe

3. scrollTop

 //页面包含DOCTYPE声明时

 document.documentElement.scrollTop

 //页面不包含DOCTYPE声明时

 document.body.scrollTop

 //我们希望的是，所有页面都应包含标准的文档类型定义<!DOCTYPE HTML>

4. 事件目标

 function eventHander(e) {

     var e = e || window.event,

         target;

     //IE下,event对象有srcElement属性,但是没有target属性;

     //Firefox下,event对象有target属性,但是没有srcElement属性.

     target = e.target || e.srcElement;

     //To do something

 }

5. input:radio的onchange事件

IE下onchange事件被触发需要内容改变且失去焦点，而Firefox下的radio，改变了内容就能触发事件；

因此，radio的onchange事件需要用onclick事件来代替。

6. 阻止浏览器默认行为

 function eventHandler(e) {

     var e = e || window.event;

     if(e.preventDefault) {

     　　//阻止默认浏览器动作(W3C)

     　　e.preventDefault();

     } else {

     　　//IE中阻止函数器默认动作的方式

     　　e.returnValue = false;

     }

 }

 //或者直接用return false来阻止浏览器默认行为

7. 阻止事件冒泡

 function eventHandler(e) {

     var e = e || window.event;

     if (e.stopPropagation) {

         //支持W3C的stopPropagation()方法

         e.stopPropagation();

     } else {

         //否则，我们需要使用IE的方式来取消事件冒泡

         e.cancelBubble = true;

     }

 }

8. 屏蔽鼠标选择文本

<div class="selectBox" onselectstart="return false;" style="-moz-user-select:none;">屏蔽双击选中文字的区域</div>

9. 禁用退格键

 //处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外

 function forbidBackSpace(e) {

     var ev = e || window.event, //获取event对象

         elmTarget = ev.target || ev.srcElement, //获取事件源

         elmType = elmTarget.type || elmTarget.getAttribute('type'), //获取事件源类型

         vReadOnly = elmTarget.readOnly, //获取作为判断条件的事件类型

         vDisabled = elmTarget.disabled,

         keyCode = ev.keyCode || ev.which; //firefox2.0中不支持 event.keyCode

     //处理undefined值情况

     vReadOnly = (vReadOnly === undefined) ? false : vReadOnly;

     vDisabled = (vDisabled === undefined) ? true : vDisabled;

     //当敲Backspace键时

     if (keyCode == 8) {

         //事件源类型为密码或单行、多行文本的readOnly属性为true或disabled属性为true的，则退格键失效

         if ((elmType == "password" || elmType == "text" || elmType == "textarea") && (vReadOnly || vDisabled)) {

             return false;

         }

         //事件源类型非密码或单行、多行文本的，则退格键失效

         if (elmType != "password" && elmType != "text" && elmType != "textarea") {

             return false;

         }

     }

 }

 //禁止后退键 作用于Firefox、Opera

 document.onkeypress = forbidBackSpace;

 //禁止后退键  作用于IE、Chrome

 document.onkeydown = forbidBackSpace;

10. XMLHttpRequest 和 ActiveXObject

 var xmlHttp = null;

 if (window.XMLHttpRequest) {

     //If IE7, Mozilla, Safari, and so on

     xmlHttp = new XMLHttpRequest();

 } else if (window.ActiveXObject) {

     //for IE5.x and IE6.

     xmlHttp = new ActiveXObject('MSXML2.XMLHTTP.3.0');

 }

 xmlHttp.open("GET", yourUrl, true | false);

 xmlHttp.onreadyStatechange = handler;

 xmlHttp.send(null);

 //xmlHttp.open("POST", yourUrl, true|false);

 //如果要传文件或者POST内容给服务器，必须先调用setRequestHeader方法，修改MIME类别

 //xmlHttp.setRquestHeader("Content-Type", "application/x-www-form-urlencoded");

 //xmlHttp.onreadyStatechange = handler;

 //xmlHttp.send("name=value&someName=blaba");

 function handler() {

     if (xmlHttp.readyState == 4) { //响应完成

         if (xmlHttp.status == 200) { //请求成功

             var txt = xmlHttp.responseText;

             //To do something.

         }

     }

 }

 //.abort() 取消http请求

 //.open(MethodString, Url, AsyncBool默认为true)

 //.send(formData) 向服务器传递的参数，没有填null

 //Reference 更多关于XMLHttpRequest的信息

 //http://msdn.microsoft.com/en-us/library/ie/ms535874(v=vs.85).aspx

.Thinking

有时候眼睁睁的看着代码，但是就不知道问题出在哪，殊不知是各种浏览器在捣蛋。了解这些差别和特性，将有助于我们Program Better！

巴特西

WEB兼容性之JS

1. 获取iframe的window对象

2. 使用iframe带来的影响

3. scrollTop

4. 事件目标

5. input:radio的onchange事件

6. 阻止浏览器默认行为

7. 阻止事件冒泡

8. 屏蔽鼠标选择文本

9. 禁用退格键

10. XMLHttpRequest 和 ActiveXObject

.Thinking

最新文章

热门文章