关于解决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改变浏览器滚动条样式
Jan 04 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
html5实现点击弹出图片功能
Jul 16 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运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
js中prototype用法详细介绍
2013/11/14 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
python中列表元素连接方法join用法实例
2015/04/07 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
python Django 创建应用过程图示详解
2019/07/29 Python
Python中turtle库的使用实例
2019/09/09 Python
python打开使用的方法
2019/09/30 Python
python安装本地whl的实例步骤
2019/10/12 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
python安装后的目录在哪里
2020/06/21 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
办公室前台岗位职责范本
2013/12/10 职场文书
优秀经理事迹材料
2014/02/01 职场文书
太太口服液广告词
2014/03/20 职场文书
政府采购方案
2014/06/12 职场文书
数学教育专业求职信
2014/07/22 职场文书
环境卫生倡议书
2014/08/29 职场文书
身份证丢失证明
2015/06/19 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
Vue.Draggable实现交换位置
2022/04/07 Vue.js