关于解决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+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 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 替换模板变量实现步骤
2009/08/24 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
js友好的时间返回函数
2016/08/24 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
JS计算斐波拉切代码实例
2019/09/12 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python实现验证码识别
2020/06/15 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
国际贸易系求职信
2014/08/09 职场文书
小学班主任心得体会
2016/01/07 职场文书
团组织关系介绍信
2019/06/24 职场文书
如何在python中实现ECDSA你知道吗
2021/11/23 Python
python playwright 自动等待和断言详解
2021/11/27 Python
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL