关于解决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 相关文章推荐
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 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
极典R601SW收音机
2021/03/02 无线电
PHP Undefined index报错的修复方法
2011/07/17 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
python中使用序列的方法
2015/08/03 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python实现图片筛选程序
2018/10/24 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
python中str内置函数用法总结
2020/12/27 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
学生爱国演讲稿
2014/01/14 职场文书
列车长先进事迹材料
2014/01/25 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
优秀大学生自荐信
2014/06/09 职场文书
群众路线表态发言材料
2014/10/17 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers