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. 在Ubuntu中安装Redis

    原文地址:http://blog.fens.me/linux-redis-install/ 在Ubuntu中安装Redis R利剑NoSQL系列文章,主要介绍通过R语言连接使用nosql数据库.涉及的 ...

  2. C++使用模版技术将任意类型的数据转为某个类型的数据

    将任意类型(int, float, 自定义的数据类型等等)的数据转换的某个类型C中储存,可以通过 将类型C的构造函数写成模版函数的形式,在C中将可以接收任意类型数据.如: class C{ templ ...

  3. @protocol 和 category 中如何使用 @property

    出题者简介: 孙源(sunnyxx),目前就职于百度 整理者简介:陈奕龙(子循),目前就职于滴滴出行. 转载者:豆电雨(starain)微信:doudianyu 在 protocol 中使用 prop ...

  4. web容器线程数和程序中线程阻塞导致 请求超时

    问题描述: web项目启动之后.调用dubbo的远程服务. 但是有个基础服务报错. 当并发访问用户量上来之后. dubbo服务的报错返回 比正常服务慢 不能正常消费服务 清理服务线程. 也就是dubb ...

  5. Android的minSdkVersion，targetSdkVersion，maxSdkVersion

    参考http://developer.android.com/guide/topics/manifest/uses-sdk-element.html API Level 是一个整型值,表示Androi ...

  6. 设计模式（二）The Observer Pattern 观察者模式

    问题引入 生成一个公告板显示当时的天气状况,当天气状况发生改变的时候公告板能够实时的更新. 模式定义 定义对象之间的一对多的依赖.当一个对象改变状态时,它的全部依赖者都会自己主动收到通知并自己主动更新 ...

  7. [转] nodeJS的post提交简单实现

    index.js: ? 1 2 3 4 5 6 7 8 var server = require('./server'); var router = require('./route'); var r ...

  8. Python开发【第九篇】：HTML （二）

    python[第十四篇]HTML基础 时间:2016-08-08 20:57:27      阅读:49      评论:0      收藏:0      [点我收藏+] 标签: 什么是HTML? H ...

  9. 13、SQL Server 自定义函数

    SQL Server 自定义函数 在SQL Server中不仅可以使用系统函数(如:聚合函数,字符串函数,时间日期函数等)还可以根据需要自定义函数. 自定义函数分为标量值函数和表值函数. 其中,标量值 ...

  10. css.day04.eg

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...