关于解决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教程(1):什么是CSS3
Apr 02 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 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使用socket post数据到其它web服务器的方法
2015/06/02 PHP
php修改数组键名的方法示例
2017/04/15 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
python远程连接MySQL数据库
2019/04/19 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
python装饰器代替set get方法实例
2019/12/19 Python
容易被忽略的Python内置类型
2020/09/03 Python
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
2015年销售助理工作总结
2015/05/11 职场文书
观后感的写法
2015/06/19 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
Python数据分析之绘图和可视化详解
2021/06/02 Python
SQL基础的查询语句
2021/11/11 MySQL