iframe标签教程(关于解决iframe标签嵌套问题的解决方法)
类别:Web前端 浏览量:2377
时间:2021-10-12 00:55:23 iframe标签教程
关于解决iframe标签嵌套问题的解决方法问题描述
当我们使用easyui做后台管理系统的时候,会使用tree组件来实现树形菜单,而我们每点击一次相应菜单,会根据是否有url来判断是否是一级菜单,以及是否已经存在
//根据该节点名字判断该节点是否存在 if ($("#tabs").tabs("exists",node.text)){ //如果存在就直接选中 $("#tabs").tabs("select",node.text); }
如果为否,我们就会嵌套一个iframe标签来打开一个相应的html窗口
$("#tabs").tabs("add",{ //标题为当前节点的名称 title:node.text, //没有边框 border:false, //是否显示关闭按钮 closable:true, //嵌套iframe标签 content:"<iframe frameborder='0' src='"+node.url+"' width='100%' height='100%'/>" })
而此时有一个什么样的问题呢?有这样一个情况,当我们在同一个浏览器中,在A和B两个选项卡中都打开了后台管理页面,然后我们在A页面进行了注销操作,此时到A页面点击“员工管理”,那么此时应该要实现全局刷新并返回到登录页面,如下图所示
但是此时,由于我们嵌套iframe的缘故,当我们点击员工管理,正常发送的请求是/employee/index,而此时由于已经logout,那么当前用户未认证
content:"<iframe frameborder='0' src='"+node.url+"' width='100%' height='100%'/>"
所以这里的iframe窗体的url地址就会变成login.jsp,从而演变成了iframe嵌套问题,也就是如下图所示:
解决思路
在我们html中,每一个打开的窗体都有一个window对象,例如我们上图所示,如果站在内层窗体的角度来讲,实际上外层窗体其实就是内层窗体的父窗体(如果打开很多个嵌套,那么最外层窗体就是top),如果要获取外层窗体也很简单,就是window.parent。
此时,如果我们要打开i的窗体不是最外层窗体,我们只需要将最外层的窗体对象赋值给当前窗体即可
//如果当前的窗体不是最外层窗体 if (window != top){ //那么就将最外层窗体的的地址赋给当前窗体 top.location.href = window.location.href; }
到此这篇关于关于解决iframe标签嵌套问题的解决方法的文章就介绍到这了,更多相关iframe标签嵌套内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- iframe标签教程(关于解决iframe标签嵌套问题的解决方法)
- iframe嵌入页面高度自动适应
- iframe嵌入页面跨域(使用iframe+postMessage实现页面跨域通信的示例代码)
- iframe跨域获取标签(iframe跨域的几种常用方法)
- iframe如何解决跨域问题(关于iframe跨域使用postMessage的实现)
- js操作iframe
- iframe怎么设置域名(iframe与window.onload如何使用详解)
- 判断iframe是否加载完成
- vue前台解析pdf文件流(Vue实现在线预览pdf文件功能利用pdf.js/iframe/embed)
- frameset与iframe 的应用与区别
- iframe向子页面发送消息(使用postMessage让 iframe自适应高度的方法示例)
- iframe解决跨域问题(跨域修改iframe页面内容详解)
- 少用iframe的原因
- iframe跨域原理(详解使用postMessage解决iframe跨域通信问题)
- iframe 弹窗(遮罩层 + Iframe实现界面自动显示的示例代码)
- 古代的鸽子是爱情的象征,并非和平的使者(古代的鸽子是爱情的象征)
- 一课译词 放鸽子(一课译词放鸽子)
- 终于来了,淘宝更改账户名测试中,快去看看你能不能修改(淘宝更改账户名测试中)
- 淘宝支持账号名修改,网友 终于可以 重新做人 了(淘宝支持账号名修改)
- 盘点那些年让人称奇的年终奖 最后一个赢辣条毫无悬念(盘点那些年让人称奇的年终奖)
- 你还没有升职吗 他竟因为几套激励理论,升职了(你还没有升职吗)
热门推荐
- C#快速排序
- 聚集索引和非聚集索引的区别有哪些
- sql server高可用的实现方式(sql server 编译与重编译详解)
- dedecms怎么加入模板(dedecms 列表页标题修改图文方法利于优化)
- css格式设置(CSS中em的正确打开方式详解)
- python操作pandas(详解Python学习之安装pandas)
- sql server表字段数据类型(SQL Server数据库中伪列及伪列的含义详解)
- python如何将xls转成xlsx(Python这样操作能存储100多万行的xlsx文件)
- dockerjenkins最新消息(新手必看docker安装jenkins详细教程)
- 阿里云rds移动数据库(阿里云跨区域服务器迁移镜像迁移,RDS数据库迁移图文教程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9