日期:2014-05-16  浏览次数:20514 次

IE6下的JavaScript

Web开发的老几都知道IE6CSS兼容问题是美工最头痛的事,此处暂时不做研究,待以后在做相关总结。通常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+已经修复此问题了。

?

?

?

?

?