关于解决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 相关文章推荐
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 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模板引擎技术简单实现
2016/03/15 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
解决python大批量读写.doc文件的问题
2018/05/08 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
python+OpenCV实现图像拼接
2020/03/05 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
StringBuilder和String的区别
2015/05/18 面试题
四种会话跟踪技术
2015/05/20 面试题
中学教师岗位职责
2013/11/26 职场文书
销售实习自我鉴定
2013/12/07 职场文书
大学生怎样进行自我评价
2013/12/07 职场文书
班会关于环保演讲稿
2013/12/29 职场文书
大学活动总结范文
2014/04/29 职场文书
团队口号大全
2014/06/06 职场文书
文言文辞职信
2015/02/28 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技