关于解决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最新技术(与图片背景相关)
Dec 24 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
Ajax PHP简单入门教程代码
2008/04/25 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
用Python设计一个经典小游戏
2017/05/15 Python
python的mysqldb安装步骤详解
2017/08/14 Python
python实现树形打印目录结构
2018/03/29 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
21岁生日感言
2014/02/27 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
实习单位推荐信
2015/03/27 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
MySQL创建管理HASH分区
2022/04/13 MySQL