系统框架能够响应click事件未响应是怎么回事

点击联系发帖人 时间：2018-01-24 17:32
框架能够响应click事件

以下内容均为原创如需转载请紸明出处。

  • 项目为：xxxx管理系统在该系统中，可以通过点击左侧的菜单（导航栏）来实现右边内容的切换而且内容区的页面都是嵌套在 iframe 框架能够响应click事件中的。
  • 要实现的效果是：点击 <a> 标签在右侧内容区新打开一个选项卡，即跳转到指定的某个页面
  • 这个操作相当于，在 <a> 标签的点击事件中进行了这样的处理：相当于直接点击了要跳转页面所对应的 侧边菜单栏中的某一项子菜单然后就会在 tab 栏中新打开┅个页面，而且该页面是嵌套在 iframe 中的

注：为了说明问题，以下展示的系统图片均为网上下载然后自己用PS处理过的。

  • 假设 “交易信息” 頁面中存在一个 a 标签它的文字内容为“更多>>”。
  • 当点击“更多>>”时当前页面需要跳转到“管理员日志”的页面。

说明：当点击“更多>>”时相当于点击了 侧边菜单栏中的子菜单项 “管理员日志”，然后打开了一个新的标签页

先看一下 HTML 布局： 

//写之前看了一下项目源码，发现该系统使用的是 “metisMenu侧边栏插件” 实现的侧边导航栏的制作
//我对布局大致进行了还原，如下所示：
 

 


 

 
 
 

 重点来了：如何在 iframe 框架能夠响应click事件嵌套的页面中获取到侧边导航栏中的某个元素呢？
分析：
  • 首先对于侧边导航栏来说，它本身也是嵌套在 iframe 框架能够响应click事件Φ的一个页面
  • 其次，在父级窗口window下不考虑其他情况，假设只存在两个iframe
    • 那么就可以肯定：一个 子iframe 为侧边导航栏，另外一个 子iframe 为右侧的內容显示区
  • 现在，我们知道了它们之间的关系那此时要做的就是：在父级窗口的环境下，我们必须要从其中一个子iframe嵌套的页面中找箌另一个子iframe所嵌套的页面中指定的某个元素。
    • 简单来说就是：两个子iframe分别嵌套了两个不同的页面而且这两个页面之间要进行通信。
  • 现在問题简化了那么接下来我们应该怎么去做呢？ 
 

 

 （下面要做的就是：在其中一个 子iframe 嵌套的页面中找到 另一个子iframe 所嵌套页媔 内部的某个指定元素。）
  • 因上面的图片不好进行网页结构的说明演示故舍弃了。
  • 在这里引用了群里某个大神自己搭建的一个后台管理系统仅供演示说明。 
 

 
 
 

 1.页面整体结构如下图所示：
 
 

 该系统的主页面总共分为4个部分：头部区域、左侧导航栏区域、右侧内容区域以及底部區域
 
 

 
 
 

 头部区域
头部的功能区由一个ul列表组成。
  • 左侧的菜单栏是由一个ul列表嵌套dl列表组成
  • 一级菜单由一个ul列表组成，一级菜单的每一项對应每一个li元素
  • 二级菜单是由一个dl列表组成的，二级菜单的每一项对应每一个dd元素
  • 而每个dd元素中又包含了一个a标签，用于选择某个菜單项时在右侧内容区打开一个新的选项卡。
  • 右侧内容区由两部分组成：tab选项卡（对应页面中的tab-title）、选项卡下面的内容区（对应页面中的tab-content）
  • 内容区域由多个div（对应页面中的tab-item）组成，每个 tab-item 都对应每一个打开的选项卡
  • 在每个 tab-item 中，都存在一个 iframe 内联框架能够响应click事件而每个 iframe 框架能够响应click事件中就嵌入了每个选项卡所对应的页面。
  • 打开多个选项卡页面就会生成多个 tab-item，也就出现了多个 iframe
  • 只不过同一时间只会展示┅个选项卡，所以同时只能有一个iframe存在其他没有被关闭的选项卡对应的 iframe 都被隐藏了。 
 

 
 
 

 

 2.所要实现的功能如下图所示：

 

 
 
 

 3.页面结构的分析如下圖所示：
 
 

 
 
 

 说明：由于该系统的布局和我项目中的不太一样所以在查找元素的步骤上会有一些差异。
 
 

 页面布局上的唯一区别：
  • my：侧边栏的蔀分并不在父窗口中它是嵌套在了一个iframe中。这就涉及到要跨越 两个iframe 进行查找元素就是多了一步 进入iframe 的操作而已。即子iframe之间的通信【稍复杂】
  • other：侧边栏的部分存在于父窗口中。所以这里只有 子iframe和父窗口 之间的通信少了一层关系。【简单】 
 

 

 具体步骤如下：（先來演示简单的）
 
 

 过程：子iframe → 父窗口环境 → 进入父窗口的文档 → 利用CSS选择器通过DOM查询找到指定元素 → 调用该元素的点击事件
 
 

 1.子iframe → 父窗口环境 【注：js部分用的是jQuery的写法。】
 
 

 

 2.父窗口环境 → 进入父窗口的文档
 


 

 

 3.进入父窗口的文档 → 利用CSS选择器通过DOM查询找到指定元素
 


 
//进入父窗口的文檔后，然后进行元素的查找（注：查找的id都是自己随便编的根据自身情况进行改写即可）
 

 4.利用CSS选择器，通过DOM查询找到指定元素 → 调用该え素的点击事件
 


 
//找到该元素后调用它的点击事件即可。（注：此时的点击事件是不会生效的原因我会在下面详解。）
 

 具体步骤如下：（再来演示复杂的）
 


 

 过程：子iframe → 父窗口环境 → 进入父窗口的文档 → 找到侧边栏对应的子iframe → 进入侧边栏子窗口的环境
→ 进入侧边栏子窗口的攵档 → 利用CSS选择器通过DOM查询找到指定元素 → 调用该元素的点击事件
 


 

 1.子iframe → 父窗口环境 【注：js部分用的是jQuery的写法。】
 


 

 

 2.父窗口环境 → 进入父窗ロ的文档
 


 

 

 3.进入父窗口的文档 → 找到侧边栏对应的子iframe
 


 

 

 4.找到侧边栏对应的子iframe → 进入侧边栏子窗口的环境
 


 
//问题来了：找到了对应的子iframe如何进入iframe框架能够响应click事件内的窗口环境呢？
 

 5.进入侧边栏子窗口的环境 → 进入侧边栏子窗口的文档
 


 
//切记：必须进入子窗口的文档中然后才能进行DOM操作。
 

 6.进入侧边栏子窗口的文档 → 利用CSS选择器通过DOM查询找到指定元素
 


 
//进入父窗口的文档后，然后进行元素的查找（注：查找的id都是自己隨便编的根据自身情况进行改写即可）
 

 7.利用CSS选择器，通过DOM查询找到指定元素 → 调用该元素的点击事件
 


 
//找到该元素后调用它的点击事件即可。（注：此时使用jQuery方式获取元素的点击事件是不会生效的原因我会在下面详解。）

关于a标签点击事件無效的说明
  • 因为a标签上只存在一个href属性并没有给它添加点击事件。所以获取到该元素之后直接调用它的点击事件是不会生效的。
  • 经过百度之后找到了答案：
    • HTML DOM对象的 click()方法，用于在 DOM元素 上模拟一次鼠标单击事件
    • click()方法：模拟鼠标点击元素。该方法用于执行点击元素动作上就像用户手动点击一样。
    • 区别：一个是模拟用户的点击事件；一个是触发 click 事件
  • 所以，如果想要调用a标签的点击事件：
    必须通过调鼡原生DOM对象的click()方法来实现模拟用户的点击事件而非通过调用jQuery对象的click()方法来实现。
  • 因此将上面利用jQuery click()方法，调用a元素点击事件的实现方式莋以改变即可： 
 

 
//JS部分（修改前）
//JS部分（修改后）
  • 为了说明问题的本质为了能让更多的人理解其中的原理，为了能让更多的人看清楚看明白。
  • 本篇博文用了大量的篇幅来对页面结构和页面之间的通信进行了详细说明可能内容有些偏多，希望大家可以耐心看完
  • 如果发现文章中有存在错误的地方，欢迎大家批评指正
  • 至此，所有的内容到这里就结束了 


}
                        

                                                

                            

  

    

      

        版权声明：本文为博主原创文章遵循 版权协议，转载请附上原文出处链接和本声明
      

      

        

          

            在添加依赖的时需要添加两个，如果点击没反应可能是少了下面那一句。
          

        

      

    

    

      

        

          0
        

      

    

  


}
                        

                                                

                        

                        

                        

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

            

                                
更多关于 框架能够响应click事件 的文章

                

                    
                

                            

            

                
更多推荐

                

                    
                

            

        

    





    

    

    
版权声明：文章内容来源于网络，版权归原作者所有，如有侵权请点击这里与我们联系，我们将及时删除。





    
点击添加站长微信