Blog

select标签的兼容性问题

注:题目可能起的不恰当。我对网页编程没什么经验,想不出一个合适的题目来说明问题。

我们这次的《分布计算》课程的作业中的第二部分,是让我们实现一个简陋的分布式任务管理软件。要求是打开网页后,上面显示目前被分配了任务的用户列表,点击用户名称后,会显示这个用户目前的所有任务,这部分要求在不刷新网页的情况下完成,也就是用AJAX技术。然后要让使用者可以添加任务,如果也可以用AJAX实现则有加分。题目只要求必须能在firefox中正常使用(也就是说不需要处理IE6的ActiveX)。

之前我对网页的理解只限于HTML和CSS的阶段,看了题目要求有些怕怕的。我大概在上周四开始尝试,但在XML文件解析那一步不得要领,在上周五终于通过自己写了一个简单的例子搞懂了如何解析XML。并完成了用户列表的部分,可以在点击用户后显示用户的ID。在昨天完成了显示任务的部分,通过得到的用户ID来获取对应的task,并生成表格。

看似进展顺利,但我心中还是有根刺──在实现用户列表的时候,我就发现在Safari下可以正常工作的程序,在firefox下就不行。当点击用户名称后,应该达到的情况是在列表下面显示用户ID。这在Safari下可以,但在Firefox下则显示undefined。因为我对FireBug不太熟悉,而Safari 4的Develop菜单下的调试工具相当直观,一下子就显示出我的javascript程序中的错误,而且在Mac下Safari比Firefox快一些,所以我从一开始就用Safari测试的。本以为Firefox的兼容性出色,Safari对标准支持的也不错,在Safari下测试通过后在Firefox下应该没问题,没想到竟然出了这种状况。当时我百思不得其解,只好先不管这一块,在Safari下继续开发测试。

到了昨天晚上显示任务列表的部分也完成了后,我又再Firefox下测试了一下,还是老样子。当时我还在学校的电脑上用IE7测试了一下,居然也完全正常,当时就直接崩溃了。然后我绝望的发现,老师给我们的例子和我有一样的情况。

那个例子通过一些音乐的播放列表来选择歌曲,并在用户点击相应的歌曲后,在下面显示歌曲的发行日期、风格、售价之类的信息。这个例子在Safari下工作很正常,但在Firefox下,当点击歌曲后,下面显式的是“n/a”。查看页面的源代码后,我发现例子中通过select标签来选择歌曲,并设定了onchange属性,给处理函数发送一个event,然后处理函数通过这个event来获得选择的结果。而出现“n/a”的情况,正好是处理函数中判断event为null的情况。我的程序就是这么实现的,例子程序都错了,让我怎么解决!想到周一晚上就要交这份作业,就算给老师发邮件指出错误,他能不能即时改动还不好说,我当时有点绝望,只好先回家。

今天早上起的莫名其妙的早,6点多一点就起来了,而在周末学校的自习咖啡厅在12点才开门。我在看完了Google Reader、通过Twitter和国内同学扯了点淡、刷完牙、洗完澡后,实在没事可作,就想着看看能不能解决一下昨天的问题。于是就在Google上搜索“ajax example”,找到了这个页面,然后就一页一页的看代码。当我看到AJAX Database Example这一页时,发现例子中也用到了select标签,里面用到了和我不一样的语法。打开TextMate,写一个小的页面测试一下,Safari和Firefox都显示正常了!于是就修改了我的源程序,在Firefox下终于也正常了。

过去我用的方法是这样的:通过“<select size="10" onchange="showTask(evt)">”标签来生成选择框,然后在处理函数中接受evt作为参数,通过下面两条语句处理:


evt = (evt) ? evt : ((window.event) ? window.event : null);
var selection = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

中间判断evt和selection的空值情况,然后selection中就是option标签里value的属性值了。例子程序中也是这么写的,在Safari和IE7下也工作正常。而改动后的程序反而简单了,select标签改为“<select size="10" onchange="showTask(this.value)">”,然后showTask收到的参数直接就是option标签中value的属性值了。

搞定了这一部分,对今天完成整个程序更有信心了。

1 comment

  1. 如果我们的网页是 PDF | 我的空想特摄 - pingback on 2013/03/15/ 09:58
    沙发

Leave a Reply