警惕多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有重名的.

时间: 2024-10-25 07:56:33

警惕多iframe下的同名id引起的诡异问题的相关文章

在iframe下的页面锚点失效问题,用jquery进行修复

应用场景是:iframe页面没有滚动条,在父窗体中出现滚动条,锚点标记就会失效,因为,锚点是根据当前窗口滚动条滚动窗口的,成为子窗体后没有了滚动条,自然不会滚动. 解决办法是:用js判断页面是否被嵌套,用js计算iframe在父窗体位置,锚点在firame中的位置,两者相加成为父窗体的滚动. 遇到问题:获取父窗体元素(因为有域限制,所有需要在网络环境下方位(即http://domain.com)):父窗体嵌套多个iframe,判断是否是当前iframe页面. 代码: 父窗体页面 index.ht

iframe下元素定位

1.iframe基础知识: <frameset>生成的框架结构是依赖上级空间尺寸的,它的宽度或者高度必须有一个和上级框架相同.而<iframe>浮动框架可以完全由指定宽度和高度决定. 语法: <iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高"></iframe> 说明: src属性是iframe的必须属性,它定义浮动框架页面的源文件地址. 参考

Eclipse4.7使用基础 使用快捷键导包时,遇到不同包下有同名类时,出现选择框

os :windows7 x64    jdk:jdk-8u131-windows-x64    ide:Eclipse Oxygen Release (4.7.0) 初始状态:已经使用快键键进行导包,由于出现不包下存在同名类,出现选择框 以供选择 如果第一个是正确的话,选择第一个 效果 如果第二个是正确的话,选择第二个 效果 利用IDE的智能提示辅助修改 Java优秀,值得学习.Eclipse是一款免费.强大的IDE,值得学习使用.

[HTML]HTML框架IFrame下利用JS在主页面和子页面间传值

今天写的程序涉及到JS框架传值的问题,这些是我找到的一些资料 下面主页面和子页面互相传值的DEMO 如果仅仅需要子页面触发主页面的函数 仅需 [ parent.window.你的函数 ] 就可以了 DOM方法:父窗口操作IFRAME:window.frames["iframeSon"].documentIFRAME操作父窗口: window.parent.document jquery方法:在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["i

【JS】测试:HTML页面引入另一个HTML页面,同名ID会冲突吗

今天被问到一个问题,就是当页面HTML页面引入了另外一个HTML页面,恰好2个页面具有相同的ID,那么需要用ID来处理一些行为的时候会发生冲突或者报错吗? 我用了iframe来引入另外一个HTML页面. 先准备好材料:1个HTML页面(含iframe标签,我命名为test.html),再加一个HTML页面(作为iframe页面的src源,这个页面我命名为iframe.html).两个页面的内容分别如下: test.html: <!DOCTYPE html> <html> <h

Linux下获取线程ID的方法

Linux下多线程程序发生coredump时,用 gdb /path/to/program/file core 可以看到所有线程 [email protected]:~/test/thread# gdb a.out core GNU gdb (GDB) 7.6.1 Copyright (C) 2013 Free Software Foundation, Inc. License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses

dos命令记录以及dos下通过进程id查找工作路径

摘自:http://www.cnblogs.com/lisuyun/p/5880815.html dos命令 tasklist |findstr "1696" 通过进程id查看进程名 tasklist 列出所有进程 netstat -ano 查看当前网络通信进程连接的各种状态 以下转自http://blog.chinaunix.net/uid-27570589-id-3969108.html windows下通过pid 找到运行程序的路径有没有遇到过这样的情景,通过window的任务管

获得同级iframe页面的指定ID元素的几种实现方法

1.JS实现: var object= window.parent.frames("要获得的iframe的name").contentDocument.getElementById("元素id"); 2.jquery实现: var object =$( "元素id", window.parent.frames("iframe的name").contentDocument); iframe获得父页面指定id的元素的方法: var

Linux下查找进程id并强制停止进程的脚本

Linux下的tomcat的停止脚本shutdown.sh经常失败,造成tomcat进程没关闭.所以只能手动查找进程id,然后用kill命令来强制停止.每次都要这样查一下,然后再杀进程.感觉有点麻烦,所以就把这个动作写在了脚本里面. 一.思路 这个脚本其实就2步,先获取进程id,然后 kill 掉这个进程. (1)获取进程id的方法 这个可以用 awk命令来获取 ps -ef | grep 你的进程 | grep -v grep | awk '{print $2}' 这里要把这个grep这个用