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兼容性概述 定义:软件兼容性测试是指检查软件之间能否正确地进行交互和共享信息.随着用户对来自各种类型软件之间共享数据能力和充分利用空间同时执行多个程序能力的要求,测试软件之间能否协作变得越来越重 ...
随机推荐
- Linux下动态库的使用
1.生成动态库: gcc -fPIC -shared -o libdemo.so demo.c 考虑程式库major的升级会破坏兼容性:而minior的升级则可能不会,一般建议用以下方式来生成动态库. ...
- HDOJ(HDU) 2504 又见GCD(利用最大公约数反推)
Problem Description 有三个正整数a,b,c(0 import java.util.Scanner; public class Main{ public static void ma ...
- inux常用命令大全
系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...
- sl4j记录
- DB2 创建数据库
0.一些准备工作可能用到的命令 db2cmd --进入db2命令行 db2 list database directory --显示已有的数据库 db2 drop db pcore --删除一个数据库 ...
- 缓存的概念（反向代理、CDN）
缓存在我们的日常开发中随处可见,理解缓存的概念,本质就是就近处理,比如很多热点数据,访问量很多,我们需要使用,就可以把它 缓存起来,然后下次访问就不用再去数据库的去查询了,而是直接使用缓存,现在说说大 ...
- 统计学习导论：基于R应用——第五章习题
第五章习题 1. 我们主要用到下面三个公式: 根据上述公式,我们将式子化简为 对求导即可得到得到公式5-6. 2. (a) 1 - 1/n (b) 自助法是有有放回的,所以第二个的概率还是1 - 1/ ...
- 1.1GTK+ 的简单程序HelloWorld
1.1GTK+ 的简单程序HelloWorld 编译执行如图所看到的:
- Android自动化测试之Monkey工具
前言:Android自动化测试工具.方法和框架,包括android测试框架.CTS.Monkey.Monkeyrunner.benchmark.test tool等. 一. 什么是MonkeyMonk ...
- android 窗体透明的，黑暗度等的设置技巧
设置透明度(这是窗体本身的透明度,非背景) 1 WindowManager.LayoutParams lp=getWindow().getAttributes(); 2 lp.alpha=0.3f; ...