解决跨浏览器问题的几个代码段总结

来源：互联网发布：java 多线程趣味编辑：程序博客网时间：2024/06/07 05:03

原文链接：地址

Ajax对象：XMLHttpRequest和IE的ActiveX对象

这两种对象的构造函数有两种不同的格式，但却共享了同一种功能和方法。一旦创建完初始的对象并将其赋值给一个对象，也就解决了Ajax的跨浏览器问题。

var xmlhttp = false;if(window.XMLHttpRequest){    xmlhttp = new XMLHttpRequest();    xmlhttp.overrideMimeType('text/xml');}else if(window.ActiveXObject){    xmlhttp = new ActiveXObject();}

实例1-Hello Ajax

下面这个就是一个基本的级联的例子，首先获得xmlhttp对象（解决跨浏览器问题），然后发送ajax请求，过程就是open,onreadyStateChange,send。当服务器接收到相应时，就要对相应进行处理，这里就是通过XMLHttpRequest的属性，status=200时表示服务器额的状态一切正常，readyState==4的时候表示响应加载完毕。所以，当一个在请求的就绪状态发生改变时就调用onreadyStateChange，来处理。

var xmlhttp = false;if(window.XMLHttpRequest){    xmlhttp = new XMLHttpRequest();    xmlhttp.overrideMimeType('text/xml');}else if(window.ActiveXObject){    xmlhttp = new ActiveXObject();}function populateList(){    var state = document.forms[0].elements[0].value;    var url = "ajax.php?state="+state;    xmlhttp.open('GET',url,true);    xmlhttp.onreadyStatechange = getCities;    xmlhttp.send(null);}function getCities(){    var cities = document.getElementById("cities");    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){        cities.innerHTML = "<select>"+xmlhttp.responseText + "<select>";    }else{        cities.innerHTML = "Error";    }}populateList();

Ajax也有缺点，这里记录一下：可访问性问题，缺少永久链接问题，浏览历史记录的问题。

尝试获取CSS样式信息

如果说就该style样式比较简单，或者style属性就没有那么简单。如果没有通过Javascrip直接设置属性，或者在元素中使用内联的style属性，即使通过样式表来设置style值，style的属性的值也都是undefined。记住这一点很重要，因为在使用DHTML（动态构建网页）很可能会遇到这个问题。

若要访问样式，你需要使用其他属性，每个属性专门用于不同的类型的浏览器。Microsoft和Opera支持currentStyle属性，而Firefox，Mozilla使用window.getComputedStyle。跨浏览器写法可如下：

function getStyle(obj,jsprop,cssprop){    if(obj.currentStyle){        return obj.currentStyle[jsprop];    }else if(window.getComputedStyle){        return document.defaultView.getComputedStyle(obj,null).getPropertyValue(cssprop);    }else{        return null;    }}alert(getStyle(obj,"backgroundColor","background-color"));

看到JAVASCRIPT核心技术上写了这么一段话：
在处理动态DHMTL时，一个很好的经验规则是：努力避免从页面样式设置中直接检索信息，相反，只要可能，就使用程序变量来保持值，只是在设置属性时才使用style。
我对这个程序变量保持值不是很明白。如果大家有理解，可否在地下留下言？谢谢啦。

opcity元素透明度跨浏览器解决方案

元素的透明度由它的opacity不透明度的百分比来决定，Microsoft坚持使用alpha滤镜。其他浏览器如Mozilla都决定采用新的css3标准。因为微软的滤镜使用百分比，而不是使用数字型的值，因此在使用IE时，保存当前opacity不透明度的变量应该乘以100。

function adjustOpacity(){    var img = document.getElementById('img1');    if(img.style.filter){        opacity = opacity*100;        img.style.filter = "alpha(:"+opacity+")";    }else if(img.style.opacity){        img.style.opacity = opacity;    }else {        alert("Opacity not supported");    }}

0 0