| 加入收藏| 设为首页| 联系我们
用DHTML中的Popup Object跨框架显示菜单
http://www.domcn.org 文章来源：本站原创 点击数：
先来看看frames.htm页面的源代码： 以下是引用片段：<html> <head> <title>网页跨框架菜单 from MSDN</title> <meta http-equiv=Content-Type content=text/html; charset=gb2312> </head> <frameset rows=92,* cols=* framespacing=4 frameborder=yes border=4> <frame src=top.htm name=topFrame scrolling=NO > <frame src=bottom.htm name=mainFrame> </frameset> <noframes><body> </body></noframes> </html> 再来看看top.htm页面的源代码： 以下是引用片段：<html> <head> <title>MSDN的示例</title> <script> var oPopup = window.createPopup(); function richContext() { var lefter2 = event.offsetY+0; var topper2 = event.offsetX+15; oPopup.document.body.innerHTML = oContext2.innerHTML; oPopup.show(topper2, lefter2, 210, 84, contextobox); } </script> </head> <body> <span id=contextobox style= cursor:hand; margin-left:5px; margin-right:10px; background:#e4e4e4; width:300; height:40; padding:20px; oncontextmenu=richContext(); return false >Right-click inside this box.</span> <DIV ID=oContext2 STYLE=display:none> <DIV STYLE=position:relative; top:0; left:0; border:2px solid black; border-top:2px solid #cccccc; border-left:2px solid #cccccc; background:#666666; height:110px; width:207px;> <DIV STYLE=position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand onmouseover=this.style.background=#ffffff onmouseout=this.style.background=#cccccc onclick=parent.location.href=http://www.microsoft.com;> Home</DIV> <DIV STYLE=position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand onmouseover=this.style.background=#ffffff onmouseout=this.style.background=#cccccc onclick=parent.location.href=http://search.microsoft.com;> Search</DIV> <DIV STYLE=position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand onmouseover=this.style.background=#ffffff onmouseout=this.style.background=#cccccc onclick=parent.location.href=http://www.microsoft.com/ie;> Intenet Explorer</DIV> <DIV STYLE=position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand onmouseover=this.style.background=#ffffff onmouseout=this.style.background=#cccccc onclick=parent.location.href=http://www.microsoft.com/info/cpyright.htm;> ©2001 Microsoft Corporation</DIV> </DIV> </body> </html>
再来看看top.htm页面的源代码：
以下是引用片段：<html> <head> <title>MSDN的示例</title> <script> var oPopup = window.createPopup(); function richContext() { var lefter2 = event.offsetY+0; var topper2 = event.offsetX+15; oPopup.document.body.innerHTML = oContext2.innerHTML; oPopup.show(topper2, lefter2, 210, 84, contextobox); } </script> </head> <body> <span id=contextobox style= cursor:hand; margin-left:5px; margin-right:10px; background:#e4e4e4; width:300; height:40; padding:20px; oncontextmenu=richContext(); return false >Right-click inside this box.</span> <DIV ID=oContext2 STYLE=display:none> <DIV STYLE=position:relative; top:0; left:0; border:2px solid black; border-top:2px solid #cccccc; border-left:2px solid #cccccc; background:#666666; height:110px; width:207px;> <DIV STYLE=position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand onmouseover=this.style.background=#ffffff onmouseout=this.style.background=#cccccc onclick=parent.location.href=http://www.microsoft.com;> Home</DIV> <DIV STYLE=position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand onmouseover=this.style.background=#ffffff onmouseout=this.style.background=#cccccc onclick=parent.location.href=http://search.microsoft.com;> Search</DIV> <DIV STYLE=position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand onmouseover=this.style.background=#ffffff onmouseout=this.style.background=#cccccc onclick=parent.location.href=http://www.microsoft.com/ie;> Intenet Explorer</DIV> <DIV STYLE=position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand onmouseover=this.style.background=#ffffff onmouseout=this.style.background=#cccccc onclick=parent.location.href=http://www.microsoft.com/info/cpyright.htm;> ©2001 Microsoft Corporation</DIV> </DIV> </body> </html>
