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>



iframe嵌套界面自适应,可高度自由收缩

iframe嵌套界面自适应,可高度自由收缩           iframe嵌套界面自适应是一个比较常见的功能需求,但是目前网上搜索出来的均不能做到自适应功能,下面是我列出来的解决方案,分享给大...
  • ron03129596
  • ron03129596
  • 2017年04月01日 19:29
  • 1822

解决下拉菜单被iframe遮住问题

  • 2014年07月28日 21:04
  • 10KB
  • 下载

深入理解iframe

http://www.cnblogs.com/fangjins/archive/2012/08/19/2645631.html 一 目的   iframe是网页布局中重要的元素,是解决...
  • liumf2005
  • liumf2005
  • 2014年07月05日 00:08
  • 1560

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

前些天一直纠结菜单和主页面两个iframe的互相重叠问题,本来以为解决菜单的遮罩就够了,没想到子菜单与主页面重叠的部分因为被遮挡而无法执行相应的鼠标事件,遂上网寻找解决办法,并根据一哥们的思路实现了通...
  • winiterxiao
  • winiterxiao
  • 2013年12月02日 11:25
  • 2354

javascript用iframe制作菜单页面

html代码文件1:   11111 22222   html代码2:...
  • tony19890820
  • tony19890820
  • 2014年06月13日 23:50
  • 317

主页面与iframe的互相访问

iframe设置一个id为iframe1。 1,iframe要执行父页面的javascript函数,则在iframe中执行如下代码: window.parent.func(); 这里func()...
  • yuxiangji
  • yuxiangji
  • 2014年02月10日 13:55
  • 1563

Layer组件多个iframe弹出层打开与关闭及参数传递

一、Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用、实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能。 Layer官网地址:h...
  • dream1120757048
  • dream1120757048
  • 2018年01月08日 11:29
  • 112

Bootstrap

起步1. Bootstrap 101 Template
  • m0_37643611
  • m0_37643611
  • 2017年04月01日 17:06
  • 505

防止页面被iframe恶意嵌套

新blog地址:http://hengyunabc.github.io/prevent-iframe-stealing/缘起在看资料时,看到这样的防止iframe嵌套的代码:try { if ...
  • hengyunabc
  • hengyunabc
  • 2015年03月09日 19:40
  • 6570

防止网页被嵌入框架iframe的js代码

if (window!=top) // 判断当前的window对象是否是top对象 top.location.href =window.location.href; // 如果不是,将top对象的网...
  • wangbaoyin
  • wangbaoyin
  • 2016年12月05日 22:38
  • 511
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js实现 菜单iframe与主页面iframe 重叠 防止互相遮挡 代码参考
举报原因:
原因补充:

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