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兼容性概述 定义:软件兼容性测试是指检查软件之间能否正确地进行交互和共享信息.随着用户对来自各种类型软件之间共享数据能力和充分利用空间同时执行多个程序能力的要求,测试软件之间能否协作变得越来越重 ...
随机推荐
- cf702A Maximum Increase
A. Maximum Increase time limit per test 1 second memory limit per test 256 megabytes input standard ...
- zoj 1760 floyd构图+Dinic最大流
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1760 #include <cstdio> #includ ...
- Python开发—Ajax系列
概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...
- php微信支付接口开发程序(一)
阅读对象 本文阅读对象:商户系统(在线购物平台.人工收银系统.自动化智能收银系统或其他)集成微信支付涉及的技术架构师,研发工程师,测试工程师,系统运维工程师. 支付模式 1. 刷卡支付 刷卡支付是用户 ...
- motan源码分析九：开关
在前面的文章中,我们已经发现了开关的踪影,例如cluster,motan支持多个cluster,当前的cluster因为开关关闭的情况下,就会使用下一个cluster. 1.开关相关的类和接口主要都在 ...
- VS2012 无法启动IIS Express Web服务器的解决方案
本文转载:http://blog.csdn.net/hongleidy5000/article/details/22732621 打开VS2012解决方案资源管理器 -> 点选 Web 项目选择 ...
- Android中监听ScrollView滑动停止和滑动到底部
1.监听ScrollView滑动停止: /********************监听ScrollView滑动停止*****************************/ scrollView.s ...
- Enterprise Architect使用教程
一.Enterprise Architect简介 Enterprise Architect是一个对于软件系统开发有着极好支持的CASE软件(Computer Aided Software Engine ...
- KMP和扩展KMP【转】
这种东西基本上在纸上自己推导一下就能做出来XD 转发注明出处 KMP 给出两个字符串A(称为模板串)和B(称为子串),长度分别为lenA和lenB,要求在线性时间内,对于每个A[i] (0<=i ...
- dir()函数：罗列出参数所有的功能列表
#coding=utf-8import sysprint dir(sys)#罗列出参数中所有的功能列表sys.__doc__#调用参数中的函数 #dir()函数扩展展详解python中dir()函数不 ...