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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Christine95/article/details/50791029

原文链接:地址


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");
    }
}
阅读更多
换一批

没有更多推荐了,返回首页