关于解决iframe标签嵌套问题的解决方法


Posted in HTML / CSS onMarch 04, 2020

问题描述

当我们使用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标签嵌套问题的解决方法

但是此时,由于我们嵌套iframe的缘故,当我们点击员工管理,正常发送的请求是/employee/index,而此时由于已经logout,那么当前用户未认证

content:"<iframe frameborder='0' src='"+node.url+"' width='100%' height='100%'/>"

所以这里的iframe窗体的url地址就会变成login.jsp,从而演变成了iframe嵌套问题,也就是如下图所示:

关于解决iframe标签嵌套问题的解决方法

解决思路

在我们html中,每一个打开的窗体都有一个window对象,例如我们上图所示,如果站在内层窗体的角度来讲,实际上外层窗体其实就是内层窗体的父窗体(如果打开很多个嵌套,那么最外层窗体就是top),如果要获取外层窗体也很简单,就是window.parent。
此时,如果我们要打开i的窗体不是最外层窗体,我们只需要将最外层的窗体对象赋值给当前窗体即可

//如果当前的窗体不是最外层窗体
        if (window != top){
            //那么就将最外层窗体的的地址赋给当前窗体
            top.location.href = window.location.href;
        }

到此这篇关于关于解决iframe标签嵌套问题的解决方法的文章就介绍到这了,更多相关iframe标签嵌套内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 #HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 #HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 #HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 #HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 #HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 #HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 #HTML / CSS
You might like
删除无限级目录与文件代码共享
2006/07/12 PHP
php 404错误页面实现代码
2009/06/22 PHP
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
php 短链接算法收集与分析
2011/12/30 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
python两种遍历字典(dict)的方法比较
2014/05/29 Python
web.py获取上传文件名的正确方法
2014/08/26 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
Python中一行和多行import模块问题
2018/04/01 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python安装pil库方法及代码
2019/06/25 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
Python短信轰炸的代码
2020/03/25 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
决定成败的关键——创业计划书
2014/01/24 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
基督教婚礼主持词
2014/03/14 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
个人欠条范本
2015/07/03 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
go语言中fallthrough的用法说明
2021/05/06 Golang