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. HDOJ(HDU) 2156 分数矩阵(嗯、求和)

    Problem Description 我们定义如下矩阵: 1/1 1/2 1/3 1/2 1/1 1/2 1/3 1/2 1/1 矩阵对角线上的元素始终是1/1,对角线两边分数的分母逐个递增. 请求 ...

  2. Linux 环境变量 $PATH

    我们知道查阅文件属性的指令 ls 完整文件名为:/bin/ls(这是绝对路径),那为什么可以在任何地方执行/bin/ls 这个指令呢?  为什么在任何目录下输入 ls 就一定可以显示出一些讯息而不会说 ...

  3. geektool--一款很geek的工具

    2016/12/18 今天尝试一款很geek的工具 geektool 听名字就超级geek有木有 get it geektool website 从官网直接下载app,一键傻瓜式安装. use it ...

  4. quartz 的学习和使用。

    任务调度器, 定时任务,保存好后会被放入触发器,这些触发器被存入到数据库,调度器线程扫描,如果有待触发的打开锁,拿到job信息,更改trigger信息,释放锁,返回所有的trigger列表,再 按照时 ...

  5. Android Dialog触摸对话框外部让其消失的实现方法

    方法一: @Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent ...

  6. 设计模式----代理模式（Proxy）

    为还有一个对象提供一个替身或占位符以控制对这个对象的訪问. 代理模式的组成: 主题接口(Subject):提取真正主题与代理的公共方法,让使用真正主题的地方也能用代理取代. 真正主题(RealSubj ...

  7. cocos2dx 自己主动加入cpp文件到android.mk

    将 LOCAL_SRC_FILES := hellocpp/main.cpp \ ../../Classes/AppDelegate.cpp \ ../../Classes/HelloWorldSce ...

  8. 实现nodejs的promises库（基于promise.js改写）

    原promise.js库地址:https://github.com/stackp/promisejs promises是JavaScript实现优雅编程的一个非常不错的轻量级框架.该框架可以让你从杂乱 ...

  9. [转] Python list、tuple、dict区别

    from: http://www.cnblogs.com/Michael-Kong/archive/2012/07/11/2585840.html Dictionary 是 Python 的内置数据类 ...

  10. 模仿ios下的coverflow

    Android高级图片滚动控件,编写3D版的图片轮播器 http://blog.csdn.net/guolin_blog/article/details/17482089 A cool Open So ...