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的更多相关文章
- Mithril – 构建杰出 Web 应用的 JS MVC 框架
Mithril 是一个客户端的 Javascript MVC 框架.它是一个工具,使应用程序代码分为数据层,UI 层和粘合层.提供了一个模板引擎与一个虚拟的 DOM diff 实现,用于高性能渲染,支 ...
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- Web前端-Vue.js必备框架（四）
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- Web前端-Vue.js必备框架（三）
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
- Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
- Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 【RSA】在 ASP.NET Core中结合web前端JsEncrypt.JS使用公钥加密，.NET Core使用私钥解密；
有一个需求,前端web使用的是JsEncrypt把后端给的公钥对密码进行加密,然后后端对其进行解密: 使用的类库如下: 后端使用第三方开源类库Bouncy Castle进行RSA的加解密和生成PEM格 ...
- 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 ...
- 06- web兼容性测试与web兼容性测试工具
web兼容性概述 定义:软件兼容性测试是指检查软件之间能否正确地进行交互和共享信息.随着用户对来自各种类型软件之间共享数据能力和充分利用空间同时执行多个程序能力的要求,测试软件之间能否协作变得越来越重 ...
随机推荐
- 数据结构——UVA 1600 机器人巡逻
描述 A robot has to patrol around a rectangular area which is in a form of mxn grid (m rows and n colu ...
- HDU1247 Hat’s Words（Trie的动态内存版本）
Hat’s Words Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...
- N - Tram - poj1847（简单最短路）
题意:火车从一点开到另一点,轨道上有很多岔路口,每个路口都有好几个方向(火车能够选任意一个方向开),但是 默认的是 第一个指向的方向,所以如果要选择别的方向的话得 进行一次切换操作 ,给定一个起点一个 ...
- poj1019
有一个序列 1 12 123 1234 ..... ........ ........... 12345678910 ................................ 求第n个数字是什 ...
- Lucene实例教程
Lucene是apache组织的一个用java实现全文搜索引擎的开源项目. 其功能非常的强大,api也很简单.总得来说用Lucene来进行建立 和搜索和操作数据库是差不多的(有点像),Document ...
- STRUCTS 2 LABLE
{LJ?Dragon}[标题]structs2标签的作用 {LJ?Dragon}[Diary]2017年,愉快的开始:离别不一定总伤感,虽然只是安慰着自己......... 问与答 问题 在Strut ...
- Linux 上Oracle RAC 10g 升级到 Oracle RAC 11g
了解如何在 Oracle Enterprise Linux 5 上逐步将 Oracle RAC 10g 第 2 版升级到 Oracle RAC 11g. Oracle 数据库 11g(即,新一代网格计 ...
- Android自定义Toast宽度无法设置问题解决
在项目中想要实现一个头部的toast提示效果,类似下图 再实现的过程中发现,如果直接通过修改Toast的View布局的父控件宽度是无法实现效果的,后来是通过直接用代码指定父控件内部的textview ...
- CreateThread函数
当使用CreateProcess调用时,系统将创建一个进程和一个主线程. CreateThread将在主线程的基础上创建一个新线程,大致做例如以下步骤: 1在内核对象中分配一个线程标识/句柄,可供管理 ...
- [转] tomcat结合nginx使用小结
相信很多人都听过nginx,这个小巧的东西慢慢地在吞食apache和IIS的份额.那究竟它有什么作用呢?可能很多人未必了解. 说到反向代理,可能很多人都听说,但具体什么是反向代理,很多人估计就不清楚了 ...