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兼容性概述 定义:软件兼容性测试是指检查软件之间能否正确地进行交互和共享信息.随着用户对来自各种类型软件之间共享数据能力和充分利用空间同时执行多个程序能力的要求,测试软件之间能否协作变得越来越重 ...
随机推荐
- [已解决问题] Could not find class XXX referenced from method XXX.<YYY>
导入Jar包的问题,有时候即使引入了Jar包也会报错,比如我在引入了libsvm.jar后仍然会报此错 解决方法是: Step 1. 创建User library,随便命一个名,然后把Jar包导入 S ...
- www.chenbowenblog.com 博客地址转移
我的新博客地址是 www.chenbowenblog.com 欢迎来访.
- 常考的算法及Java知识总结
算法 1 字符串模式匹配问题 2 排列组合问题 3 查找排序问题 数据结构 B树(B,B*,B+,红黑树)和二叉树的区别,MAP,hashmap, JAVA: 线程sleep,wait,wake(), ...
- Mac下Intellij IDea发布Java Web项目详解三 新建Module
准备工作1:新建第一个JavaWeb项目 Step4 添加两个module 4.1 右键[WebWorkSpace]-[New]-[Module] 4.2 重复 准备工作1:新建第一个JavaWeb项 ...
- Postman interceptor
安装 下载地址: Postman Interceptor Chrome插件下载 1. 下载的是一个crx文件. 2. 在谷歌中打开: chrome://extensions/ 3. 拖动cfx文件到 ...
- 通配符的匹配很全面, 但无法找到元素 'cache:advice' 的声明
EB-INF\classes\spring-jdbc.xml] is invalid; nested exception is org.xml.sax.SAXParseException; lineN ...
- OS开发 touch事件的优先级和事件传递
界面类的对象一般都是可以接触点击事件的,只不过有的默认接受,有的需要设定属性. userInteractionEnabled 属性设置为YES的时候就可以接受点击事件了 - (void)touches ...
- http状态码对应表
http状态码 1**:请求收到,继续处理 2**:操作成功收到,分析.接受 3**:完成此请求必须进一步处理 4**:请求包含一个错误语法或不能完成 5**:服务器执行一个完全有效请求失败 100— ...
- url编码解码-js编码、C#编码
JS编码解码 函数一定义和用法encodeURI() 函数可把字符串作为 URI 进行编码. 语法 encodeURI(URIstring) 参数 描述 URIstring 必需.一个字符串,含有 U ...
- Java基础知识强化之集合框架笔记09：Collection集合迭代器使用的问题探讨
1.Collection集合迭代器使用的问题探讨: (1)问题1:能用while循环写这个程序,我能不能用for循环呢? 可以使用for循环替代. (2)问题2:不要 ...