JS和CSS的多浏览器兼容(3)

3.Javascript的浏览器兼容性问题

3.1 集合类对象问题
说明:IE下,可以使用()或[]获取集合类对象; Safari及Chrome下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.

3.2 获取对象方式
说明：HTML对象的 id和name 在IE使用getElementById都会找到，在Safari及Chrome中name是找不到的，必须严格使用getElementById和getElementsByName.
解决方法：id使用getElementById, name使用getElementsByName，并要注意大小写

3.3 模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口; 在Chrome中是将其作为window.open方法处理，而且不能使用window.returnValue的方法返回值
解决方法:在Chrome中使用window.opener.returnValue=’value’的方法返回值， 打开窗体时用半透明DIV遮住页面主体，在其之上显示“对话框”内容。showModelessDialog 方可以使用 window.open 代替

例子：父窗体

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type="text/javascript">

function openDialog() {

//for chrome

if (navigator.appName == "Netscape") {

　　　　　　　　window.document.getElementById("winCover").style.display="block";

}

var retValue = window.showModalDialog("dialog.html?temp=" + Math.random(), window, 　　　　　　　　'scroll=no;resizable=no;help=no;status=no;center=yes;dialogHeight=400px;dialogWidth=300px');

//for chrome

if (retValue == undefined) {

retValue =   window.returnValue;

}

if (navigator.appName == "Netscape") {

window.document.getElementById("winCover").style.display   = "none";

}

alert("return value: " + retValue);

}

</script>

</head>

<body style="height:100%">

<input type="button" onclick="javascript: openDialog();" value="Show Modal dialog"/>

<div id="winCover" style="z-index:100; left:0px; top:0px; width:100%; height:100%; position:fixed; background-color:#e0e0e0; filter:Alpha(Opacity=60); opacity:0.6; display:none"></div>

</body>

</html>

子窗体

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script type="text/javascript">

function rt(s) {

if (window.opener) {

//for chrome

window.opener.returnValue = s;

window.close();

}

else {

window.returnValue = s;

window.close();

}

}

</script>

</head>

<body>

<input type="button" value="close" onclick="javascript: rt('abc');" />

</body>

</html>

3.4 event问题

说明：在IE下，可以直接在event中调用function,但是在Chrome中这样是无效的

解决方法：在function前统一加上”javascript:”，包括在服务器代码中addAttribute

例子：这样写在Chrome中无效

<input type="button" value="close" onclick="rt('abc');" />

应改为：

<input type="button" value="close" onclick="javascript: rt('abc');" />