警惕多iframe下的同名id引起的诡异问题

遇到个诡异bug,虽然bug中套bug,忽略次要bug,其中最诡异最典型的现象是多行window.top.$("#id")取值操作,其中有一行却取不到值.这个着实让我费解.因为用到了top,我开始以为是z-index引起的层级问题.因为我在页面中alert一下要取的元素,页面功能就看起来正常了.只不过期间多了一个弹出框.正常后怎么都是正常的,除非重新开启浏览器会再次故障.

当然这期间查找过取不到值的id,确实是存在的.再看一下整个页面的布局,多个iframe,每个iframe最终会引入一个jsp页面.所以整体布局非常复杂,着实让人头大,无奈只好回退到20个版本之前,一个一个版本试验,查找故障边界版本..

在挣扎了10几个版本后终于确定到故障发生的版本,我个人认为这个应该是主页面的布局被损坏了,所以查看一下故障版本对主页面的更改,在引入的js文件中查到一个让我崩溃的结果.这个故障版本中居然通过jquery在主页面中生成了一个元素,但是这个元素的id和页面中的某个iframe将要引入的子jsp文件中的一个元素id是相同的,也就是说,这个页面中有2个id相同的元素,一个在主页面中,一个在引入的子jsp页面中,结果导致引入的jsp文件中相关方法全都异常失效,而且失效的表现还很诡异..

这让我长了一个教训啊,因为是多个iframe,所以在确认页面中是否存在要取值的id元素时,也仅仅是确认了子jsp页面中是否存在,完全没想到id同名会造成这么诡异的问题.

所以要是引入多个jsp页面出现故障,不妨排查一下所有子jsp页面中的id是否和主页面中的元素id有重名的.