关于解决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 相关文章推荐
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
HTML5 weui使用笔记
Nov 21 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
POST提交数据常见的四种方式
Jan 18 HTML / CSS
使用CSS实现音波加载效果
May 07 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
Yii操作数据库的3种方法
2014/03/11 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
微信小程序之购物车功能
2020/09/23 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
Django内容增加富文本功能的实例
2017/10/17 Python
深入理解Python中的*重复运算符
2017/10/28 Python
Python装饰器用法实例总结
2018/02/07 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
python 中字典嵌套列表的方法
2018/07/03 Python
Python Requests库基本用法示例
2018/08/20 Python
pygame实现简易飞机大战
2018/09/11 Python
python 二维数组90度旋转的方法
2019/01/28 Python
python模块导入的方法
2019/10/24 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
医学生求职信
2014/07/01 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
教师节校长致辞
2015/07/31 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
python单向链表实例详解
2022/05/25 Python