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

原创 2013年12月02日 11:25:29

       前些天一直纠结菜单和主页面两个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 onmouseenter="parent.ChangeZIndex1()" onmouseleave="parent.ChangeZIndex2()">

</body>



相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

关于在topframe中下拉被挡住的解决方案

关于在frameset 中topframe下拉被下面frame挡住的问题,可以通过设置z-index为解决,另外要注意设置布局。 main:top.jsp为头部图片           ...

iframe应用,悬浮框架

解决的问题: 1、关于iframe里面内容的:文本或者图片的样式设计可以在引用的html文中设置其中的内容为div层 应用iframe布置页面整体布局 ...

彻底解决 iframe 挡住层 DIV

把原来在IFRAME中的DIV放到它的父页面,这样在IFRAME中弹出父页IFRAME面的DIV就不会被其他IFRAME挡住了来自:http://www.cnblogs.com/willpower/a...
  • getdate
  • getdate
  • 2011年03月14日 16:52
  • 6634

一个页面中有两个iframe

点击左边iframe,内容显示在右边的iframe 代码:   //初始化 function initItem(){ var params="?approSeq="++"&proS...

页面中存在多个iframe时iframe内容异常问题

近期在开发中遇到一个很奇怪的问题:HTML页面中有2个iframe,每次打开的时候这2个iframe都是一样的内容,或者有时候异常显示。 示例代码: #if(${formMa...

主页面实现两个iframe中元素拖动

  • 2015年11月12日 17:29
  • 280KB
  • 下载

跨域传值即主页面与iframe之间互相传值

需求一:主页面A 怎么向 iframe B 传递数据呢?  这种方式,是主页面需要给 iframe B 传递数据,然后 iframe B 获得到数据后进行特定的处理  实现方式  实...

iframe 自适高度 JS控制代码实现

  • 2011年12月15日 11:26
  • 844B
  • 下载

浏览器主页、iframe、子窗口的互相操作

主页操作iframe: var ifs = document.getElementById('iframeID').contentWindow.document; \\获取到iframe的docum...
  • five3
  • five3
  • 2014年02月17日 22:39
  • 3082
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js实现 菜单iframe与主页面iframe 重叠 防止互相遮挡 代码参考
举报原因:
原因补充:

(最多只允许输入30个字)