IE6下的JavaScript

搞Web开发的老几都知道IE6的CSS兼容问题是美工最头痛的事，此处暂时不做研究，待以后在做相关总结。通常CSS兼容IE的有效手段就是使用条件注释。

 

这里主要讲述JavaScript兼容性问题，关于浏览器兼容性问题解决之后大家会感觉很简单，但是在解决的这个过程中是十分痛苦的，这里先记录下部分，以后遇到再追加吧。

 

1.iframe[name]

 

在IE6中动态创建iframe时，其name属性务必写在标签中，否则不生效。

 

var iframe = $("<iframe name='my_iframe' frameborder='0' style='width:100%; height:100%; border:0; display:block'/>")[0];
iframe.src = settings.href;

 只有这样写IE6才能够识别form/a的target='my_iframe'

 

如果你是按下面的写法创建的iframe，那么就悲剧了。

 

 

var iframe=$("<iframe>");
iframe.name='my_frame';

 

 

2.checkbox/radio[checked]

在IE6动态创建checkbox/radio时，其checked属性务必写在标签中，否则不生效

 

var checked="";
if (elem.val() == "1") {
	checked='checked="checked"';//just because fuck ie6				
}				
var targetElem = $('<label><input type="checkbox" name="param_value" '+checked+' value="1" />自动数据同步</label>');

 

 如果写法如下，那么在IE6上是悲剧的

 

var targetElem = $('<label><input type="checkbox" name="param_value" value="1" />自动数据同步</label>');
targetElem.find("input").attr('checked','checked');

 

 

3.form[class]

 

在IE6/7中，如果form中有一个域的名字叫做className那么悲剧了，form.classXxx将无法正确执行。

 

原代码示例：

 

 

<form id="dataEditor1" action="Controller"
service="ConfigService.updateAdapter" nextstep="close" class="DataEditor">

	<div>
		<label>
			<span>账单类型：</span>
			<input type="text" name="billType" value="${ param.bill_type}"
			validates="{required:true,messages:{required:'此参数不允许为空！'}}" />
	</label>
</div>

<div>
	<label>
		<span>适配器名称：</span>
		<input type="text" name="name" value="${ param.bill_name}"
			validates="{required:true,messages:{required:'此参数不允许为空！'}}" />
	</label>
</div>

<div>
	<label>
		<span>适配器实现类：</span>
		<input type="text" name="className"
			value="${ param.adapter_class}"
			validates="{required:true,messages:{required:'此参数不允许为空！'}}" />
	</label>
</div>
<input type="hidden" name="action_type"
	value="${ param.action_type}" />
	<input type="submit" name="submit" value="提交" class="spq_input" disabled="disabled" />
	<input type="reset" name="reset" value="重置" />
</form>

 注意“适配器实现类”的input，它的name="className"。

 

使用js取值

 

var form=$("form.DataEditor");
alert("forms:"+form.length);//结果为0
alert($("form")[0].className);//结果为[Object object]

 这个悲剧是因为IE中支持按照表单名和表单域名进行索引，例如dataEditor1.billType。幸好在IE8+已经修复此问题了。