再战浏览器兼容

也许你也喜欢用document.all.*的写法来取得一个页面元素的引用，那么这个习惯是很糟糕的，这个语法只有IE支持，火狐里面是不行的。两者都支持的方法是：document.getElementById(),如果你嫌这个方法输入太麻烦可以简化一下：var $=function (id){return document.getElementById(id);} 后面就可以这样写了$("div");这种简化偷师至Prototype
如果要取到页面元素的内容object.innerHTML是没有问题的，innerText在IE里通行，在火狐里面是textContent
也许你和我一样喜欢使用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)" />
对于事件源我们还是期望有一个统一的使用方法，这里我们可以通过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);

}
使用.net类库我们这里使用可以很方便的引入System.Xml.Xsl等namespace来进行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 DOM将document.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

发表于 2008-07-21 08:14 坚强2002 阅读(3771) 评论(41) 编辑收藏举报

刷新页面返回顶部

再战浏览器兼容

公告