关于解决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 相关文章推荐
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 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 程序员应该使用的10个组件
2009/10/31 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
PHP错误处理函数
2016/04/03 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
python 常用的基础函数
2018/07/10 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
Python函数和模块的使用总结
2019/05/20 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Python的形参和实参使用方式
2019/12/24 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
女方婚礼新郎答谢词
2014/01/11 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
服务承诺口号
2014/05/22 职场文书
学校党员对照检查材料
2014/08/28 职场文书
2015年林业工作总结
2015/05/14 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL
spring 项目实现限流方法示例
2022/07/15 Java/Android