关于解决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 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 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
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
Python正则表达式介绍
2012/08/06 Python
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
高二学生评语大全
2014/04/25 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
不同意离婚上诉状
2015/05/23 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python