您现在的位置是:网站首页> 编程资料编程资料
关于解决iframe标签嵌套问题的解决方法div嵌套html不用iframeiframe 多层嵌套 无限嵌套 高度自适应的解决方案
2021-08-30
1241人已围观
简介 这篇文章主要介绍了关于解决iframe标签嵌套问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
问题描述
当我们使用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:"" })而此时有一个什么样的问题呢?有这样一个情况,当我们在同一个浏览器中,在A和B两个选项卡中都打开了后台管理页面,然后我们在A页面进行了注销操作,此时到A页面点击“员工管理”,那么此时应该要实现全局刷新并返回到登录页面,如下图所示

但是此时,由于我们嵌套iframe的缘故,当我们点击员工管理,正常发送的请求是/employee/index,而此时由于已经logout,那么当前用户未认证
content:""
所以这里的iframe窗体的url地址就会变成login.jsp,从而演变成了iframe嵌套问题,也就是如下图所示:

解决思路
在我们html中,每一个打开的窗体都有一个window对象,例如我们上图所示,如果站在内层窗体的角度来讲,实际上外层窗体其实就是内层窗体的父窗体(如果打开很多个嵌套,那么最外层窗体就是top),如果要获取外层窗体也很简单,就是window.parent。
此时,如果我们要打开i的窗体不是最外层窗体,我们只需要将最外层的窗体对象赋值给当前窗体即可
//如果当前的窗体不是最外层窗体 if (window != top){ //那么就将最外层窗体的的地址赋给当前窗体 top.location.href = window.location.href; }到此这篇关于关于解决iframe标签嵌套问题的解决方法的文章就介绍到这了,更多相关iframe标签嵌套内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
相关内容
- Html5 video标签视频的最佳实践html5用video标签流式加载的实现html5自定义video标签的海报与播放按钮功能html5视频媒体标签video的使用方法及完整参数说明详解详解Html5中video标签那些属性和方法解决html5中的video标签ios系统中无法播放使用的问题
- HTML如何让IMG自动适应DIV容器大小的实现方法HTML中img标签只显示图片中心位置的方法(三种方法)详解HTML/XHTML中img图像标签的基本用法在html的img src=""中调用js函数或js变量来动态指定图片路径HTMLimg标签的alt属性和title属性使用介绍解决html 图片img加超链接后产生难看的蓝色边框问题
- HTML实现代码雨源码及效果示例使用canvas实现黑客帝国数字雨效果CSS实现雨滴动画效果的实例代码纯CSS流星雨背景的示例代码使用纯CSS实现动态晴阴雨雪(单标签)CSS 、JS实现浪漫流星雨动画canvas实现漂亮的下雨效果的示例Canvas制作的下雨动画的示例HTML5实现晶莹剔透的雨滴特效HTML5梦幻之旅——炫丽的流星雨效果实现过程用Dreamweaver实现网页上漫天花雨效果的方法
- 使用placeholder属性设置input文本框的提示信息HTML5 placeholder属性详解让IE下支持Html5的placeholder属性的插件ie placeholder属性的兼容性问题解决方法HTML 5 input placeholder 属性如何完美兼任ieHTML5 placeholder(空白提示)属性介绍限制html文本框input只能输入数字和小数点使一个input文本框随其中内容而变化长度的方法
- html5实现滑块功能之type="range"属性浅谈html5增强的页面元素详解HTML5中CSS外观属性总结html5自定义属性有哪些Html5之自定义属性(data-,dataset)浅析HTML5页面元素及属性
- 记一次高分屏下canvas模糊问题关于canvas绘制模糊问题的解决方法高清屏中使用Canvas绘图出现模糊的问题及解决方法深入了解canvas在移动端绘制模糊的问题解决HTML5 Canvas图像模糊完美解决办法html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
- 使用canvas压缩图片上传的方法示例html5 canvas移动浏览器上实现图片压缩上传浅析图片上传及canvas压缩的流程
- HTML5 实现图片上传预处理功能Html5实现单张、多张图片上传功能html5拖拽排序多图片上传插件特效源码html5实现的头像图片上传并截图修改保存功能源码HTML5实现移动端上传图片滤镜特效源码HTML5实现手机端图片上传裁剪特效源码HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
- 微信小程序canvas实现水平、垂直居中效果微信小程序之html5 canvas绘图并保存到系统相册小程序canvas中文字设置居中锚点 基于Jscex +HTML5 Canvas 制作的抽奖小程序
- Html5定位终极解决方案html5 制作地图当前定位箭头的方法示例Html5获取高德地图定位天气的方法HTML5地理定位_动力节点Java学院整理HTML5地理定位与第三方工具百度地图的应用HTML5的Geolocation地理位置定位API使用教程HTML5实现获取地理位置信息并定位功能HTML5地理定位实例html5定位获取当前位置并在百度地图上显示html5定位并在百度地图上显示的示例利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上
