随笔:338 文章:323 评论:1817 引用:69
博客园 首页
发新文章 联系 订阅订阅管理

再战浏览器兼容

 
  1. 也许你也喜欢用document.all.*的写法来取得一个页面元素的引用,那么这个习惯是很糟糕的,这个语法只有IE支持,火狐里面是不行的。两者都支持的方法是:document.getElementById(),如果你嫌这个方法输入太麻烦可以简化一下:var  $=function (id){return document.getElementById(id);} 后面就可以这样写了$("div");这种简化偷师至Prototype
  2. 如果要取到页面元素的内容object.innerHTML是没有问题的,innerTextIE里通行,在火狐里面是textContent
  3. 也许你和我一样喜欢使用event.srcElement,但是在火狐里面是event.target,例如
    <input id="Button2" type="button" value="Test" onclick="alert(event.target.id)" />
    而且注意这里还有一个小问题,event必须作为参数传递进去;
    下面的方法是不对的:

    function TestEvent()

    {

     alert(event.target.id);//这里火狐会提示event未定义

    }

    <input id="Button3" type="button" value="TestEvent" onclick="TestEvent(event)" />

    正确的写法:

    function TestEvent(event)

    {

     alert(event.target.id);

    }

    <input id="Button3" type="button" value="TestEvent" onclick="TestEvent(event)" />
     

  4. 对于事件源我们还是期望有一个统一的使用方法,这里我们可以通过funciton.caller来暗度陈仓:
     
    function getEvent()

        
    {

         
    if(document.all) return window.event;//ie

         func
    =getEvent.caller;//这是该方法的关键

                
    while(func!=null){

                    
    var arg0=func.arguments[0];

                    
    if(arg0){if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){return arg0;}            }

                    func
    =func.caller;

                }


               
    return null;

        }


        
    function getSrcElement()

        
    {

             
    var evt=getEvent();

             
    var element=evt.srcElement || evt.target;

             
    return element;

        }


    function TestCommonEvent()

    {

     
    var src=getSrcElement();//我们就可以使用这样一个统一的方式来获得事件源

     alert(src.id);

    }


     

  5. 使用.net类库我们这里使用可以很方便的引入System.Xml.Xslnamespace来进行XSLT转换。代码简单
    XslTransform xslt = new XslTransform();     
    xslt.Load(
    "print_root.xsl");
    XmlDocument doc 
    = new XmlDocument();
    doc.Load(
    "library.xml");
    // Create a new document containing just the result tree fragment.
    XmlNode testNode = doc.DocumentElement.FirstChild; 
    XmlDocument tmpDoc 
    = new XmlDocument(); 
    tmpDoc.LoadXml(testNode.OuterXml);
    // Pass the document containing the result tree fragment 
    // to the Transform method.
    Console.WriteLine("Passing " + tmpDoc.OuterXml + " to print_root.xsl");
    xslt.Transform(tmpDoc, 
    null, Console.Out, null);

    数据是固定的只是转换一下样式,这种需求在Web应用中还是很常见的,我们知道这样大大减少了客户端与服务器端的往返次数和服务器端的计算压力。那么客户端有这个能力么?

    MSDN上我们也找到了使用Javascript进行客户端XSLT转换的解决方案

     

    var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
    var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
    var xslProc;
    xslDoc.async 
    = false;
    xslDoc.load(
    "createProcessor.xsl");
    if (xslDoc.parseError.errorCode != 0{
       
    var myErr = xslDoc.parseError;
       WScript.Echo(
    "You have error " + myErr.reason);
    }
     else {
       xslt.stylesheet 
    = xslDoc;
       
    var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
       xmlDoc.async 
    = false;
       xmlDoc.load(
    "books.xml");
       
    if (xmlDoc.parseError.errorCode != 0{
          
    var myErr = xmlDoc.parseError;
          WScript.Echo(
    "You have error " + myErr.reason);
       }
     else {
          xslProc 
    = xslt.createProcessor();
          xslProc.input 
    = xmlDoc;
          xslProc.addParameter(
    "param1""Hello");
          xslProc.transform();
         document.getElementById(
    "outputdiv").innerHTML=xslProc.output; 
       }

    }

    找到解决方案我们并没有开心多久,你知道浏览器兼容是每一个web开发者的隐忧,显然上面的解决方案太微软太IE了。我们需要冷静一下,我们的目标是要兼容Firefox

       W3C DOMdocument.implementation属性作为使脚本找出当前环境实现了哪些DOM模块的一个途径。最后的解决方案是这个样子:

     


          
  1 function XsltTransform(xslfile)
  2 
  3     {         
  4 
  5         if(typeof(window.ActiveXObject) != 'undefined')
  6 
  7         {
  8 
  9             //ie
 10 
 11             try
 12 
 13             {
 14 
 15                 var xmlDoc=new ActiveXObject("Msxml2.DOMDocument.3.0");
 16 
 17                 var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
 18 
 19                 xmlDoc.async=false;
 20 
 21                 xslDoc.async = false
 22 
 23                 xmlDoc.loadXML(document.getElementById("xmlContent").value.replace(/\r\n/gi,""));
 24 
 25                 xslDoc.load(xslfile);
 26 
 27                 
 28 
 29                 var oTemplate = new ActiveXObject("Msxml2.XSLTemplate");
 30 
 31                 oTemplate.stylesheet = xslDoc;
 32 
 33                 var oProcessor = oTemplate.createProcessor();
 34 
 35                 oProcessor.input = xmlDoc.documentElement;
 36 
 37                                 
 38 
 39                 oProcessor.addParameter("parameter",'<%=count%>');
 40 
 41                 oProcessor.transform();
 42 
 43                 
 44 
 45                 document.getElementById('div').innerHTML=oProcessor.output;
 46 
 47                 
 48 
 49             }catch(e){
 50 
 51                
 52 
 53             }
 54 
 55         }    
 56 
 57         else if(document.implementation && document.implementation.createDocument)
 58 
 59         {  
 60 
 61             //ff
 62 
 63             try
 64 
 65             {
 66 
 67                 var parser=new DOMParser();
 68 
 69                 var xmlDoc;
 70 
 71                 if(document.getElementById("xmlContent").value == "")                 
 72 
 73                     xmlDoc = parser.parseFromString(text,"text/xml");
 74 
 75                 else
 76 
 77                     xmlDoc = parser.parseFromString(document.getElementById("xmlContent").value.replace(/\r\n/gi,""),"text/xml");
 78 
 79                 
 80 
 81                 xmlDoc.async = false;
 82 
 83                  
 84 
 85                 var xslDoc = document.implementation.createDocument(""""null);
 86 
 87                 xslDoc.async = false;  
 88 
 89                 xslDoc.load(xslfile);     
 90 
 91 
 92 
 93                 // 定义XSLTProcessor对象
 94 
 95                 var xsltProcessor = new XSLTProcessor();
 96 
 97                 xsltProcessor.importStylesheet(xslDoc);
 98 
 99                 xsltProcessor.setParameter(null"parameter"'<%=count %>');
100 
101                 // transformToDocument方式
102 
103                 var result = xsltProcessor.transformToDocument(xmlDoc);
104 
105                 document.getElementById('div').innerHTML = result.documentElement.textContent;
106 
107             }catch(e){    
108 
109             }
110 
111         } 
112 
113     }
114 
115   jet
116 
坚强2002和你一起回头再说...
发表于 2008-07-21 08:14 坚强2002 阅读(2015) 评论(41)  编辑 收藏
 
评论
挺烦火狐的~
#2楼 
@无常
火狐的市场份额越来越 大 不能忽视
#3楼 
不错,受教了!
#4楼 
收藏了
#5楼 
虽然火狐的市场份额越来越大,但还就很烦它
#6楼 
Mark
#7楼 [楼主]
@丁学
浏览器兼容这事要么我们做 要么就把成本转移到用户那里

USB3.0的标准迟迟不出来 如果出现多个标准的话 买单的还是消费者
#8楼 
是的,应该兼容现有主流的浏览器
o(∩_∩)o...
#9楼 
火狐用很久了,习惯成自然
#10楼 
这个世界需要统一,太tm烦了。
#11楼 
不错,楼主辛苦咯
#12楼 
不错.
#13楼 
我FK火狐~~
如果把网站验证码放到UpdatePanel里,提交过去FF永远都会报验证码出错,真的是无语了
#14楼 
我一直用Maxthon,所以力挺IE....
不要因为少部分人的利益让程序员增加一倍的工作量.
想想哪些非计算机专业的普通上网者,基本都是双击桌面的IE...

或者,赶紧弄出一个大家都遵守的标准!!!TMD把问题都扔给程序员...
#15楼 
火狐是蛮慢的,greenbrowser等基于ie的比它快很多。
要不是他插件多,我也不会用ff。希望ie振作起来,ie8统一天下,别那么多麻烦。
#16楼 [楼主]
@Tony Zhou

如果说有一个爱上Firefox的理由,那么就是它的js调试插件
顺便推荐几个:

请先更新Firefox到3.0.1版本,否则无法安装下列插件

firebug-1.2.0b6-fx.xpi 用来动态调试脚本和定位页面元素
firecookie-0.6-fx.xpi 查看cookie值和状态
jiffy-1.0.20080619-fx.xpi 记录页面元素下载的时间线
rainbow_for_firebug-0.6-fx.xpi 为js代码着色方便调试
web_developer-1.1.6-fx.xpi 一个web开发者的工具包 强烈建议美工试一下
yslow-0.9.5b2-fx.xpi yahoo发布的页面优化工具
#17楼 [楼主]
@斧头帮少帮主
赞同最后一句 我们需要的是一个标准
浏览器兼容问题真正苦恼的是我们的美工
#18楼 
--引用--------------------------------------------------
坚强2002: @斧头帮少帮主
赞同最后一句 我们需要的是一个标准
浏览器兼容问题真正苦恼的是我们的美工
--------------------------------------------------------
我倒觉得倒霉的是程序员,因为美工做出效果图来很容易,就算进一步你是做front-end的,想做出个静态的兼容各浏览器的页面来也不是很难,但这东西一旦和程序结合起来,NND,有时候真想砍人
#19楼 
什么时候才能有一个统一的标准类,期待中。
#20楼 [楼主]
@丁学
目前我们能做的就是美工和程序员协作,既然问题避免不了那就尽量把问题的解决过程变得流畅
07年我和美工合作把系统内的浏览器兼容问题解决了,这个磨合的过程真的是非常有价值的
参考:
     摘要: 本文内容覆盖:
1.一个肯定错误的做浏览器兼容的方法;
2.一个可能正确的做浏览器兼容的方法;
3.一个非常好的辅助工具组合:firebug+yslow
4.Firefox与IE在JS脚本方面的几点区别
5.总结
#21楼 
一个头痛的问题
没有统一的标准,太多时间用在兼容浏览器了...
#22楼 [楼主]
@Selfocus
之前我们也是用“堵漏洞”的方式在系统开发完成甚至上线之后才关注浏览器兼容问题
这样的消耗的确是很大的,而且效果不好
现在我们把浏览器兼容的工作提前到做原型页面的时候,这样做比以前省了很多精力
#23楼 
兼容的问题确实很麻烦
#24楼 
--引用--------------------------------------------------
坚强2002: @Selfocus
之前我们也是用“堵漏洞”的方式在系统开发完成甚至上线之后才关注浏览器兼容问题
这样的消耗的确是很大的,而且效果不好
现在我们把浏览器兼容的工作提前到做原型页面的时候,这样做比以前省了很多精力
--------------------------------------------------------
经常是做好后先在IE里面看看有没有问题,再到FF里面看看有没有问题.出错的话就打补丁.
#25楼 
@坚强2002
是,我是写web的,用了这些插件很方便。ie的developtoolsbar不大好用。
#26楼 
反感火狐,虽然我也装着火狐,并且现在也是再用火狐看博客园,但是还是恶心火狐,在访问163博客的时候经常死掉,然后强制关掉进程,firebug不错 很好用,但是还是恶心火狐
#27楼 
就你这水平还来 论 浏览器兼容 ,你以为浏览器兼容就 document.all 这些吗?

或者说浏览器兼容就 javascript 这些吗?

css ,xhtml等等, 多学习吧
#28楼 [楼主]
@吃请客

你说的对,那些去年我也学习了

浏览器兼容包括的内容很多 需要学习很多W3C的规范和标准

相对于美工,我们更关注脚本的兼容 :)
#29楼 
脚本的兼容实际很简单,他相对于 css,xhtml这些要简单 ,实际上这三者往往没有很清晰的界限 ,比如说你只知道javascript,但不知道css属性 ,或者不知道xhtml元素组成都是不可以的。

另外发现你一直有一个误区(目标是兼容firefox) ,要知道我们其实没有必要刻意去兼容某一种浏览器 ,这么说 safari ,opera这些你都不管了吗?

你能确定ff能运行良好的 ,safari ,opera也可以?

As a developer? what should we do ?
Observe the w3c rule is my job...



#30楼 [楼主]
@吃请客

呵呵 不是误区,因为我们的用户群主要使用IE6 IE7 FF,所以目标是兼容FF

这是我们的最低要求 safari ,opera的兼容我们也做了 :)

#31楼 
--引用--------------------------------------------------
Lee2008: @无常
火狐的市场份额越来越 大 不能忽视
--------------------------------------------------------
我不这样认为,都说火狐占用多大大市场,但实际用户用什么浏览器大家都知道,还是ie,而且火狐打开网页的速度实在不敢恭维!!对开发人员来说,就更别提了!!
#32楼 
有多少浏览器不是错误,关键是大家要商量一个统一的标准,火狐是为了和IE做对而诞生的(网景前身),所以它搞自己的一套,而不是考虑和IE兼容,IE是为市场而诞生的所以它想尽各种办法来兼容,有了火狐这坨屎,IE才会开出美丽的花(IE8算是好了很多)。
在互联网的早期社会,网景浏览器之所以流行是因为上网都是程序员和电脑发烧友的东西,所以它很牛,但现在上网是和看电视一样东西,绝大多数用户对用IE还是用FF永远都是无所谓的,就像绝大多数人不在乎是否用高清电视,只有极少数发烧友才玩那东西,火狐几乎没机会
#33楼 
我自己一直在使用FireFox(脚本调试就是好啊),但开发的程序却要求公司的人使用IE,而且只能使用IE6!
IE7?赶紧卸载掉,页面难看、变形不是我的问题,我不可能准备两套样式表吧!!!
哈哈......
#34楼 
是啊,基本一个人全包了,包括需求分析、数据库设计、编码、界面
感觉兼容性真的很烦人
#35楼 
为了兼容IE6和IE7已经够痛苦的了,再出来一个FireFox掺和,痛苦啊!希望有朝一日某个浏览器一统天下。
#36楼 
--引用--------------------------------------------------
深蓝: 为了兼容IE6和IE7已经够痛苦的了,再出来一个FireFox掺和,痛苦啊!希望有朝一日某个浏览器一统天下。
--------------------------------------------------------
岂止FF啊,还有safari,opera呢.
#37楼 
看来我比较懒,这种事情交给prototype或者jquery之类的框架去做了。 我也不太关注具体他们是怎么实现的, 如果不需要修改框架的话。 就像c#的tostring()一样, 基本上每天都在用, 但是还没关心过怎么来的。 哈哈
#38楼 
FF就刚出现的那段时间用过几次,后来再也没用过。。太垃圾了。。而且,到处做广告。还记得,当年有多少网站,为了忽悠人去下载火狐,可是用了不少下三滥的招数。。。。一个好软件不是嘴上吹的。。。我从不管是否跟FF兼容,但是我会尽量按自己以前学的XHTML和DOM来做。。

m$说过,市场可比所谓的标准要重要的多。。
#39楼 
真奇怪,IE 这么糟糕,还有这么多人挺。
试想没有 FF 的话 IE 能有进步吗?
IE6 中众多的 Bug 难怪你们没有遇到过?如今的 FF 早已不是那个靠忽悠人来做推广的小狐狸了。在 FF 和其它浏览器的追赶下,远离标准的 IE 现在已不得不作出让步,承认遵循和兼容标准是 IE 正在努力的方向。
奉劝那些死抱着 IE 不放的朋友们,放眼界放开一点,别以为除了MS,其它都不是东西。其实 MS 一家独大,到头来没什么好处。
#40楼 
呵呵,ie6的bug是多,但ie7 和ie8肯定改进不少,开发人员及用户,不仅仅是要浏览器减少bug,不是看广告更要看疗效!!宣传的和垃圾一样,到处都是,但是真正用起来,唉~~。
#41楼 
ie 对 W3C 标准支持不好,这个是不可不说的现实,ie6 只是当初微软自己弄出来的一个标准而已,可以说相当偏离 W3C,而 ie 7/8肯定要兼容 ie6 的事件,不然自己的风格就没有了。当然 W3C 也在不断发展,说不定哪天就把 ie 的实现当作标准收录了。
 

标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *