关于解决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 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 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+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
python最长回文串算法
2018/06/04 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
架构师岗位职责
2013/11/18 职场文书
中学生演讲稿
2014/04/26 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
给校长的建议书600字
2014/05/15 职场文书
学校教师安全责任书
2014/07/23 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers