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. Mithril – 构建杰出 Web 应用的 JS MVC 框架

    Mithril 是一个客户端的 Javascript MVC 框架.它是一个工具,使应用程序代码分为数据层,UI 层和粘合层.提供了一个模板引擎与一个虚拟的 DOM diff 实现,用于高性能渲染,支 ...

  2. Web前端-Vue.js必备框架（五）

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  3. Web前端-Vue.js必备框架（四）

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  4. Web前端-Vue.js必备框架（三）

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  5. Web前端-Vue.js必备框架（二）

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

  6. Web前端-Vue.js必备框架（一）

    Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. 【RSA】在 ASP.NET Core中结合web前端JsEncrypt.JS使用公钥加密，.NET Core使用私钥解密；

    有一个需求,前端web使用的是JsEncrypt把后端给的公钥对密码进行加密,然后后端对其进行解密: 使用的类库如下: 后端使用第三方开源类库Bouncy Castle进行RSA的加解密和生成PEM格 ...

  8. how to export svg form web page in js

    how to export svg form web page in js https://stackoverflow.com/questions/2483919/how-to-save-svg-ca ...

  9. 06- web兼容性测试与web兼容性测试工具

    web兼容性概述 定义:软件兼容性测试是指检查软件之间能否正确地进行交互和共享信息.随着用户对来自各种类型软件之间共享数据能力和充分利用空间同时执行多个程序能力的要求,测试软件之间能否协作变得越来越重 ...

随机推荐

  1. 2012 A 《中国近现代史纲要》课程期末考试试卷

    湖南人文科技学院2012—2013学年第1学期公共课 2011级<中国近现代史纲要>课程期末考试试卷 考核方式:(开卷)                                   ...

  2. merge into 语法缺陷

    merge into 语法缺陷? test001

  3. rsync是类unix系统下的数据镜像备份工具

    http://baike.baidu.com/view/1183189.htm   Ubuntu安装: sudo apt-get install rsync RedHat: yum install r ...

  4. 你好，C++（12）怎样管理多个类型同样性质同样的数据？3.6 数组

    3.6  数组 学过前面的基本数据类型之后,我们如今能够定义单个变量来表示单个的数据.比如,我们能够用int类型定义变量来表示公交车的216路:能够用float类型定义变量来表示西红柿3.5元一斤. ...

  5. 第一篇：数据工程师眼中的智能电网(Smart Grid)

    前言 想必第一次接触到智能电网这个概念的人,尤其是互联网从业者,都会顾名思义的将之理解为"智能的电网". 然而智能电网中的"智能"是广义上的智能,它就是指更好的 ...

  6. 使用downloadmanager调用系统的下载

    /** * 文件名 UpdateDownload.java * 包含类名列表 com.issmobile.numlibrary.tool * 版本信息  版本号  * 创建日期 2014年7月14日  ...

  7. Java基础知识强化之集合框架笔记11：Collection集合之迭代器的原理及源码解析

    1. 迭代器为什么不定义成一个类,而是定义为一个接口 ?  答:假设迭代器定义的是一个类,这样我们就可以创建该类的对象,调用该类的方法来实现集合的遍历.但是呢? 我们想想,Java中提供了很多的集合类 ...

  8. python 之路，Day11 (下)- sqlalchemy ORM

    python 之路,Day11 - sqlalchemy ORM   本节内容 ORM介绍 sqlalchemy安装 sqlalchemy基本使用 多外键关联 多对多关系 表结构设计作业 1. ORM ...

  9. Ajax 如何提交集合到mvc后台

    1,前端请求如下 var apply = { CompanyName: $("[name='corpName']").val(), ContactUser: $("[na ...

  10. Windows Azure上的Odoo(OpenERP)

    OpenERP 改名为 Odoo 了,感觉名字怪怪的.Windows Azure也进入国内了,学习了一段时间的Azure,把它门结合在一起搞搞吧!本系列文章不涉及开发,纯属环境搭建及Odoo 系统功能 ...