js 浏览器兼容的一些方法

使用js是一件令人很抓狂的事情,很多的浏览器兼容,一大推的代码,谁的脑袋能记住那么多的东西,只有平时多积累,所谓熟能生巧嘛。。这里列出一些常用的兼容代码,一点点积累哈~~~

一、以跨浏览器的方式处理事件。这个叫EventUtil对象定义了一些方法,用来处理各浏览器之间的差异。

var EventUtil={

addHandler:function(element,type,handler){//绑定事件

if(element.addEventListener){

element.addEventListener(type,handler,false);

}else if(element.attachEvent){

element.attachEvent("on"+type,handler);

}else{

element["on"+type]=null;

}

},

removeHandler:function(element,type,handler){//取消事件

if(element.removeEventListener){

element.removeEventListener(type,handler,false);

}else if(element.detachEvent){

element.detachEvent("on"+type,handler);

}else{

element["on"+type]=null;

}

},

getEvent:function(event){//获取event对象

return event:event?window.event;

},

getTarget:function(event){//获取事件目标

return event.target||event.srcElement;

},

preventDefault:function(event){//阻止默认事件

if(event.preventDefault){

event.preventDefault();

}else{

event.returnValue=flase;

}

},

stopPropagation:function(event){//阻止冒泡事件

if(event.stopPropagation){

event.stopPropagation();

}else{

event.cancelBubble=true;

}

},

getRelatedTarget:function(event){//mouseover,mouseout通过event提供相关元素信息

if(event.relatedTarget){

return event.relatedTarget;

}else if(event.toElement){

return event.toElement;

}else if(event.fromElement){

return event.fromElement;

}else{

return null;

}

},

getButton:function(event){//获取鼠标按下键位

if(document.implementation.hasFeature("MouseEvents","2.0")){

return event.button;

}else{

switch(event.button){

case 0:

case 1:

case 3:

case 5:

case 7:

return 0;

case 2:

case 6:

return 2;

case 4:

return 1;

}

}

},

getCharCode:function(event){//键盘按下键的ascii值码

if(typeof event.charCode=="number"){

return event.charCode;

}else{

return event.keyCode;

}

},

//clipboardData 剪贴板对象,firefox不支持该对象

getClipboardData:function(event){//获取剪贴板数据

var clipboardData=(event.clipboardData||window.clipboardData);

return clipboardData.getData("text");

},

setClipboardData:function(event,value){

if(event.clipboardData){

return event.clipboardData.setData("text/plain",value);

}else if(window.clipboardData){

return window.clipboardData.setData("text",value);

}

},

}

二、对表单的操作兼容的一些函数:

1、取得用户在文本框取得的文本:

function getSelectedText(textbox){

if(document.selection){//ie

return document.selection.creatRange().text;

}else{

return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);

}

}

2、选择部分文本:

function selectText(textbox,startIndex,stopIndex){

if(textbox.setSelectionRange){

textbox.setSelectionRange(startIndex,stopIndex);

}else if(textbox.createTextRange){//ie

var range=textbox.createTextRange();

range.collapse(true);

range.moveStart(‘character‘,startIndex);

range.moveEnd(‘character‘,stopIndex-startIndex);

range.select();

}

textbox.focus();

}

三、一些常用的js自定义函数。

1、下面这个函数可以辅助向现有的URL的末尾添加查询字符串参数,查询字符串中的每个名称和值都应该用encodeURIComponent()进行编码,不然容易发生请求错误:

function addURLParam(url,name,value){

url+=(url.indexof(‘?‘)==-1?"?":"&");

url+=encodeURIComponent(name)+"="+encodeURIComponent(value);

return url;

}

2、设置和获取cookie:

var CookieUtil={

get:function(name){

var cookieName=encodeURIComponent(name)+"=",

cookieStart=document.cookie.indexof(cookieNmae);

cookieValue=null;

if(cookieStart>-1){

var cookieEnd=document.cookie.indexof(";",cookieStart);

if(cookieEnd==-1){

cookieEnd=document.cookie.length;

}

cookieValue=decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));

}

return cookieValue;

},

set:function(name,value,expires,path,domain,secure){

var cookieText=encodeURIComponent(name)+"="+encodeURIComponent(value);

if(expires instanceof Date){

cookieText+=";expires="+expires.toGMTString();

}

if(path){

cookieText+=";path="+path;

}

if(domain){

cookieText+=";domain="+domain;

}

if(secure){

cookieText+=";secure="+secure;

}

return cookieText;

}

unset:function(name,path,domain,secure){

this.set(name,"",new Date(0),path,domain,secure);

}

}

时间: 2024-08-02 14:53:22

js 浏览器兼容的一些方法的相关文章

个人总结 css 浏览器兼容常见问题总结方法

1.如何让整个界面不出现滚动条,铺满整个浏览器.方法:在body中加overflow: hidden;有时候会出现底部有一段的空白,解决方法在form中加overflow: hidden;. 2.height:100%或者是width:100% 一加这个就会出现滚动条,除非控制. 3.IE显示下有时候字体会比其他浏览器显示的要小,解决方法:用IEhack区分不同浏览器 font-size:10px; 所有浏览器都可识别font-size:10px\9;所有IE浏览器都可识别font-size:1

scss、less 对浏览器兼容的处理方法, css 的单行溢出、多行溢出

1. scss @mixin rounded($param1,$param2) { #{$param1}:$param2; -webkit-#{$param1}: $param2; -moz-#{$param1}: $param2; -ms-#{$param1}: $param2; -o-#{$param1}:$param2; } 使用方法: @include rounded(transition,all 0.3s); 2.less .promise(@css, @args) { @{css}:

浅谈CSS hack(浏览器兼容)

今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu.com/data/browser).令我感到欣慰的是chrome排第一,chrome一直以来对W3C标准都支持得比较友好,但是图中也反映了使用IE系列的人数也不少,所以我们日常做前端开发的时候还要考虑他们的感受. 以下是正文: 我的前任公司做前端的时候,要求兼容IE8及以上,谷歌,火狐三座大山.因为

浏览器兼容问题踩坑收集

1.vue开发的网站在搜狗浏览器下预览,报错:Uncaught ReferenceError: __WEBPACK_AMD_DEFINE_ARRAY__ is not defined 建议解决方案:将jquery的版本降下到2.x  , npm install [email protected]^2.2.4 --save 2.vue开发的网站在IE9.0浏览器下预览,报错:对象不支持"setLogLevel"属性或方法       建议解决方案:(先空) 3.Vue开发的网站在IE11

关于浏览器兼容问题及hack写法

浏览器的兼容问题 1.浏览器内核: Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( WebKit ) Google Chrome ( WebKit ) 2.css hack 解决浏览器兼容的主要方法是css hack 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. IE6 IE7 IE8 Fire

js快速判断IE浏览器(兼容IE10与IE11)

在很多时候,我们一般采用navigator.userAgent和正则表达来判断IE浏览器版本,下面介绍用IE浏览器中不同特性来判断IE浏览器   1 判断IE浏览器与非IE 浏览器 IE浏览器与非IE浏览器的区别是IE浏览器支持ActiveXObject,但是非IE浏览器不支持ActiveXObject.在IE11浏览器还没出现的时候我们判断IE和非IE经常是这么写的 ? 1 2 3 function isIe(){        return window.ActiveXObject ? tr

js在浏览器兼容教程:事件处理

如果在使用javascript的时候涉及到event处理,就需要知道event在不同的浏览器中的差异,主要的JavaScript的事件模型有三种(参考<Supporting Three Event Models at Once>),它们分别是NN4.IE4+和W3C/Safar. 1. window.event [分析说明]先看一段代码 function et(){ alert(event);//IE: [object]} 以上代码在IE运行的结果是[object],而在Firefox无法运行

常见的浏览器兼容问题和解决方法

为什么会有兼容问题? 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容. 使用Trident内核的浏览器:IE.Maxthon.TT: 使用Gecko内核的浏览器:Netcape6及以上版本.FireFox: 使用Presto内核的浏览器:Opera7及以上版本: 使用Webkit内核的浏览器:Safari.Chrome. 而我现在所说的兼容性问题,主

调浏览器兼容步骤方法

终于完成了页面代码的编写.师傅叫我现在开始调浏览器的兼容性.在火狐和chrome中都显示的好好的页面,在ie8中就开始显示不行了.调试的最好方法就是逐步审查,用排除法. 首先,在ie中貌似对标签是否完整有要求.当笔者就是在某个地方<a>标签不完整导致div快显示有问题.所以在ie调试之前先审查自己的标签. 其次,建议先从高版本的浏览器进行调试. 最后,常见的问题: 1.fixed元素 当我上面一个标签使用了fixed属性时,相邻的标签用margin这个属性与其保持间距就会失效. 解决方案:1.