js实现 菜单iframe与主页面iframe 重叠 防止互相遮挡 代码参考

最新推荐文章于 2023-06-17 10:08:19 发布
最新推荐文章于 2023-06-17 10:08:19 发布
阅读量4.8k 收藏 1
点赞数
分类专栏： js 文章标签： iframe 遮挡 js 菜单 menu
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/winiterxiao/article/details/17069103
版权

       前些天一直纠结菜单和主页面两个iframe的互相重叠问题，本来以为解决菜单的遮罩就够了，没想到子菜单与主页面重叠的部分因为被遮挡而无法执行相应的鼠标事件，遂上网寻找解决办法，并根据一哥们的思路实现了通过鼠标的移动实现界面z-index的互相切换，代码展示的只是一个思路，希望对大家有帮助~

页面a.html

<body>   
    <iframe id="x" src="Menu.aspx" frameborder="0" scrolling="no" width="1300px" height="200px" style="position:absolute;top:80px;left:315px;z-Index:-1;"></iframe>


    <iframe id="y"  src="MainPage.aspx" frameborder="0" scrolling="no" style="position:absolute;width:1300px;height:800px;z-index:1; top: 250px; left: 100px;"></iframe>
  
</body>

<script type="text/javascript">
    function ChangeZIndex1() {
        document.getElementById("x").style.zIndex=1;
        document.getElementById("y").style.zIndex = -1;
    }
    function ChangeZIndex2() {
        document.getElementById("Menu").style.zIndex = -1;
        document.getElementById("MapRegion").style.zIndex = 1;
    }
</script>


页面x.aspx

<body οnmοuseenter="parent.ChangeZIndex1()" οnmοuseleave="parent.ChangeZIndex2()">

</body>


HUST_winiter
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe-overlay:可以添加到 iframe 之上的叠加层，以控制用户事件如何传播到 iframe
07-02
iframe-overlay 可以添加到 iframe 之上的叠加层，以控制如何将用户事件传播到 iframe。 这个怎么运作 事件由覆盖 iframe 的覆盖层捕获。 这些事件通过 postMessage 使用 Poster 转发到 iframe，然后使用 EventSim 在 iframe 内重新触发。 应用程序接口 iframeOverlay.createOverlay(iframe) 在父级中调用以指定要在其上创建叠加层的 iframe 返回具有两个属性的对象：down 和 paused paused 控制是否转发事件 iframeOverlay.createRelay(元素) 在 iframe 内调用以指定在哪个元素上重新触发事件 未来的工作 改进 API：更好的命名，更好的控制转发方式（可能是委托）
iframe标签常见问题和解决方法（持续更新）
最新发布
sodakii的博客
03-25 982
问题描述：当尝试从父页面访问或操作<iframe>中的内容时，如果<iframe>加载的页面与父页面不同源，则会遇到跨域安全限制。问题描述：<iframe>可能会增加页面的加载时间，特别是当嵌入多个<iframe>或内容较重的页面时。问题描述：搜索引擎可能不会抓取或索引<iframe>中的内容，这可能影响父页面的SEO表现。问题描述：在<iframe>与父页面之间进行数据传递或调用函数时遇到困难。问题描述：调整<iframe>的大小和样式以适应不同的布局需求。
window.location.href 框架子页面的引导
stevenbill的博客
01-26 498
window.top //最顶层窗口 window.self //当前窗口 window.parent //父级窗口 "window.location.href"、"location.href"是本页面跳转 "parent.location.href"是上一层页面跳转 "top.location.href"是最外层的页面跳转 举例说明： 如果A,B,C,D都是...
html 两个iframe重叠,iframe标签嵌套的子页body不能重合，如图：_html/css_WEB-ITnose
weixin_39884373的博客
06-03 296
html css web 红色框记是iframe边,蓝色框记是子页body边图一：图二：回复讨论(解决方案)我想要达到的是：蓝色框记与红色框记重合蓝色框记是子页body边re:子页？也是一个iframe?不是，是指iframe内嵌页面设置iframe的frameborder=0iframe的连接页(你的子页)的样式为body {margin:0;padding:0;}设置iframe的fram...
vue路由传参的两种方式,实现返回上个页面不刷新
anny_mei的博客
07-17 9917
我的项目是当在新增页面(下面叫A页面)先提交一些数据,然后跳转到下一个页面(下面叫B页面)再填写数据,然后返回到新增的页面 之前我直接跳转回B页面goback(),这样的话跳转回来A页面就什么数据都没有了 解决方法有两种,一种是在地址栏里面拿参数 this.$router.push({ name:'xxxxxxxxx', // 跳转的页面名称 params:{ id:this.id || "xxxxxxxxxx" } }) 在
使用iframe作为日历的载体，不再被select和flash等控件挡住的日期输入框
10-31
在Web开发过程中，经常会遇到日期选择器与页面上的其他元素（如`<select>`下拉菜单、Flash插件等）重叠导致交互不便的问题。为了解决这一问题，本文介绍了一种将日历嵌入到`<iframe>`中的方法，以此来避免与其他DOM...
解决IE6下三级下拉菜单被select遮挡的问题.docx
03-13
在IE6浏览器中，由于其自身的布局和渲染机制存在一些bug，导致在实现多级下拉菜单时，可能会出现下拉菜单被页面中的`<select>`元素遮挡的问题。这个问题对于网页开发者来说是一个常见的头疼问题，尤其是在需要兼容旧...
div等浮层在IE6下被下拉框遮挡的解决方法
09-25
在IE6浏览器中，一个常见的问题是在页面上使用div创建的浮动层（通常用于弹出窗口或下拉菜单）会被网页中的下拉列表（DropDownList）遮挡。这是因为IE6处理下拉列表的方式不同，它将DropDownList视为系统级别的控件...
浅析CSS--元素重叠及position定位的z-index顺序.pdf
11-27
在CSS布局中，元素的位置和重叠是一个关键概念，尤其涉及到`position`定位和`z-index`属性时，这些问题往往会让开发者感到困扰。本文将深入探讨元素重叠的背景知识，以及`position`定位下的`z-index`顺序。 首先，...
浅析CSS--元素重叠及position定位的z-index顺序.docx
11-27
对于特定情况，例如`Flash`元素和IE6下的`select`元素，可能需要特殊的处理，如更改`wmode`属性或使用`iframe`来解决窗口元素的遮挡问题。 总结来说，理解`position`定位和`z-index`的关系是解决元素重叠问题的关键...
iframe页面嵌套问题
weixin_57913339的博客
04-20 2768
一、 iframe的框架根据内容自适应高度 iframe是在项目设计中经常用到的框架标签。而它的作用就是把页面嵌套在自身形成的框架体中，从而实现在一个固定的地方可以切换多个页面，并且其他内容不变。在使用iframe这个框架标签时新手往往是直接固定iframe的宽高。那么当文本内容的长度不一样时就要一个一个地设置。当有上百个页面时这无疑是增加了代码量。而这个问题的解决方法也非常简单，我们只需要让它自适应高度就好。
iframe子页面弹出框遮罩层问题的解决方法
zhuyin365的博客
07-03 2455
做项目出现的问题： 两个页面： 主页面：包含html 和 js。 子页面：包含html。 目标：想要在主页面的 某元素后 显示子页面的元素，所以在主页面的 js 中，使用嵌套 iframe 的方式，将子页面嵌套在主页面中（子页面中有个弹框的操作），但出现了下面的问题： 问题：（弹框在子页面，弹出时遮罩层只是遮住子页面，没有全屏，并且弹框的上面一部分被主页面遮盖了） 解决方案： 将弹...
html 两个iframe重叠,解决同一页面中两个iframe互相调用jquery,js函数的方法，iframejquery...
weixin_36319281的博客
06-03 396
解决同一页面中两个iframe互相调用jquery,js函数的方法，iframejquery这一个月又没更新博客，唉，懒癌又犯了，今天解决了一个问题，关于两个iframe互相调用jquery函数方法a.html中有两个iframe,如下：b.html中有一个treeview,称为左菜单iframec.html为b.html中treeview点击后显示的数据,就称为右页面iframe。既然两个页面之...
如何禁止iframe里面的脚本弹出的窗口覆盖了父窗口
yousuf007的专栏
10-13 3058
<br />在父窗口定义<br />var location = new Object()<br />//或者var location = ""等都可以<br /> <br />top.location != location<br />判断当前是页面和祖父页面的地址是不是一样的，如果是一样的，则祖父页面即当前页面，如果不一样，可能是当然页面处于弹出窗口或框架内<br />这个在很多场合可以用，有个场合可以用在防止自己的网页被别人IFRAME过去，即被别用框架引用过去<br />if (top.locati
iframe中弹出框后添加覆盖整个页面的遮罩层并且不覆盖子页面中的弹出框
热门推荐
judas_jia的博客
08-11 2万+
iframe中弹出框后添加覆盖整个页面的遮罩层并且不覆盖子页面中的弹出框
JS 刷新保持iframe页面并支持浏览器前进后退
菜鸟记录
06-17 1570
⏹JS 刷新保持iframe页面并支持浏览器前进后退
iframe 嵌网页 只显示网页的某一部分
steven_jxy的博客
11-03 1万+
实现嵌入 方法，使用DIV控制，这也是使用iframe框架的好处，因为它不像frame，它可以显示的网页的任意区域代码如下： < html> < head> <title>Iframe标签显示目标网页的指定区域</title> < /head> < body> < div align="center" style="margin:0 auto;"> <div style="width:900px;
JavaScript代码实现页面保护与禁用功能
"这篇资料主要介绍了如何使用JavaScript实现对网页的保护措施，包括禁止保存、屏蔽右键菜单、阻止缓存、防止复制以及检测是否被框架嵌入等。" JavaScript是一种广泛应用于网页开发的脚本语言，它可以用来增强网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值