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兼容性概述 定义:软件兼容性测试是指检查软件之间能否正确地进行交互和共享信息.随着用户对来自各种类型软件之间共享数据能力和充分利用空间同时执行多个程序能力的要求,测试软件之间能否协作变得越来越重 ...
随机推荐
- kafka在zookeeper中的存储结构
参考site:http://kafka.apache.org/documentation.html#impl_zookeeper 1.zookeeper客户端相关命令 在确保zookeeper服务启动 ...
- [后端Day1]Python2.7之基础
注:以下内容全部为 廖雪峰的官方网站 中学习内容的摘要和总结 输入和输出: name = raw_input('please enter your name: ') print '100 + 200 ...
- Marzoni(玛佐尼）意大利顶级西服面料之一_HollandandSherry_新浪博客
Marzoni(玛佐尼)意大利顶级西服面料之一_HollandandSherry_新浪博客 Marzoni(玛佐尼)意大利顶级西服面料之一 (2013-01-08 17:30:04) 转载▼
- idea unknow facet type web 解决方案
菜单 -->Preferences-->Plugins 添加tomcat支持 如图: 然后 项目project-setting中 可以添加 web类型的facets了 pasting
- 利用MyEclipse配置S2SH三大框架篇-Spring配置
1.配置完Struts2后,然后配置Spring 2.单击“MyEclipse->Project Capabilities->Add Spring Capabilities” 3.选择Sp ...
- php session_set_save_handler 函数的用法(mysql)(转)
<?php /*============================文件说明======================================== @filename: s ...
- Enterprise Architect使用教程
一.Enterprise Architect简介 Enterprise Architect是一个对于软件系统开发有着极好支持的CASE软件(Computer Aided Software Engine ...
- 深入浅出hive-hive简介
1. 什么是hive •Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类SQL查询功能. •本质是将HQL转换为MapReduce程序 2. 为什么 ...
- Python之路,Day13-----暂无正在更新中
Python之路,Day13-----暂无正在更新中
- HDU5327
#include <iostream> #include <stdio.h> #include <cstring> using namespace std; int ...