我的BLOG搬家到自己的站點(diǎn)了
站點(diǎn)鏈接
RSS
? 先帖樣子
????
使用層或者其他技術(shù)所實(shí)現(xiàn)的JS菜單不能解決的問(wèn)題就是這些菜單不能跨幀，也就是說(shuō)在Frame之間的時(shí)候無(wú)可奈何，所幸的是IE5+提供了createPopup這個(gè)函數(shù)，可以提供窗口的創(chuàng)建，使用createPopup需要注意以下幾個(gè)問(wèn)題:
1、函數(shù)沒(méi)有任何參數(shù)
2、CreatePopup函數(shù)返回的值是新窗口的句柄，這個(gè)窗口和普通的窗口一樣，所有該有的東西都有。
3、新窗口的parent屬性可以對(duì)父級(jí)窗口（調(diào)用createPopup函數(shù)的窗口進(jìn)行訪問(wèn)）
4、一個(gè)窗口只能創(chuàng)建一個(gè)popup窗口，新調(diào)用createPopup將會(huì)吧以前的窗口關(guān)閉。
5、新窗口的內(nèi)容初始的時(shí)候是空的，沒(méi)有任何內(nèi)容，使用document.write和document.body.innerHTML設(shè)置值
6、窗口顯示的時(shí)候調(diào)用popwindow.show函數(shù)，調(diào)用契約為 show(left,top, width, height, document.body);最后一個(gè)參數(shù)指明位置屬性相對(duì)的對(duì)象
7、窗口隱藏直接調(diào)用hide函數(shù)。
8、在父級(jí)窗口中點(diǎn)擊鼠標(biāo)將會(huì)自動(dòng)將popwindow隱藏。
9、銷(xiāo)毀父親窗口不一定銷(xiāo)毀其創(chuàng)建的popwindow，前提是保存窗口句柄的對(duì)象是否被銷(xiāo)毀。
10、使用alt-tab轉(zhuǎn)換窗口的時(shí)候，有時(shí)這些新窗口會(huì)懸浮在桌面頂層，不會(huì)隨IE窗口轉(zhuǎn)到后臺(tái)而隱藏（IE6、IE7都是）
11、新窗口的對(duì)象不能使用父窗口的CSS風(fēng)格，需要手工復(fù)寫(xiě)
12、新窗口中的鏈接（Anchors）需要注意點(diǎn)擊之后鏈接顯示的窗口是當(dāng)前的窗口，一般無(wú)效。
13、新窗口中的JavaScript出現(xiàn)錯(cuò)誤的時(shí)候并不會(huì)在當(dāng)前的IE狀態(tài)欄中提示！
14、新窗口的CSS風(fēng)格不支持expression，暈！
15、顯示窗口的時(shí)候（調(diào)用show函數(shù)）必須指定窗口的位置和大小，尤其是大小，新窗口可不能自動(dòng)進(jìn)行縮放！

實(shí)現(xiàn)跨幀菜單首先確定顯示方式，每一級(jí)的菜單都是顯示在一個(gè)Popwindow中，如前所述，在一個(gè)窗口中只能有一個(gè)popwindow,如圖顯示二級(jí)菜單就無(wú)法顯示了，如何解決這個(gè)問(wèn)題呢？
剛才我們提到，popwindow對(duì)象本身就是一個(gè)完整的窗口對(duì)象，要解決這個(gè)問(wèn)題的最直接的辦法就是，下級(jí)菜單的生成有父親菜單所在的窗口（不管是主窗口還是popwindow）調(diào)用createPopup生成，這樣，各級(jí)菜單都可以擁有自己的popwindow,而且可以自動(dòng)的在同級(jí)菜單中進(jìn)行切換，具體的腳本如下

var?ele=control==null?event.srcElement:$(control);
/*...*/
var?popw=ele.document.parentWindow.window.createPopup();
/*...*/

層次結(jié)構(gòu)可以構(gòu)造菜單的基本樣式，剛才提到，popwindow不支持CSS風(fēng)格，也就是說(shuō)需要手工將CSS風(fēng)格寫(xiě)到popwindow中，寫(xiě)CSS風(fēng)格可以使用document.write方式或者直接構(gòu)造styleSheet對(duì)象然后插入rule的方式（注意，直接使用document.body.innerHTML寫(xiě)的style標(biāo)簽好像沒(méi)有生效），我采用前者，主要原因是，我在主窗口中配置菜單的顯示風(fēng)格，而后將這些顯示css風(fēng)格的文本信息直接保存下來(lái)，然后對(duì)每個(gè)新窗口進(jìn)行寫(xiě)操作，這樣就可以保持每級(jí)菜單的CSS風(fēng)格完全一致。
讀取主窗口CSS的代碼如下

FrameMenuConfig.CssText="";
????for(var?n=0;FrameMenuConfig.CssPrefix!=null?&&?FrameMenuConfig.CssPrefix.length>0?&&?n<document.styleSheets.length;n++)
????{
??????var?sts=document.styleSheets[n];
??????for(var?x=0;x<sts.rules.length;x++)
??????{
????????var?rr=sts.rules[x];
????????if(rr.selectorText.indexOf(FrameMenuConfig.CssPrefix)>=0)
????????{
??????????FrameMenuConfig.CssText+=rr.selectorText+"{"+rr.style.cssText+"}";
????????}
??????}
????}

這里使用的是匹配FrameMenuConfig.CssPrefix的CSS風(fēng)格才寫(xiě)入到新的窗口中。

然后涉及到菜單的數(shù)據(jù)結(jié)構(gòu)的定義，這個(gè)定義比較簡(jiǎn)單，就不扯了，用膝蓋也能想出來(lái)。我這邊處理的時(shí)候?yàn)榱朔乐购瘮?shù)被重復(fù)定義，使用了簡(jiǎn)單的類(lèi)靜態(tài)函數(shù)的方式進(jìn)行定義。

到現(xiàn)在為止，我們可以畫(huà)出一層一層的菜單，在每層的菜單項(xiàng)上掛接onmouseover處理函數(shù)就可以自動(dòng)彈出下級(jí)菜單，一切看起來(lái)已經(jīng)完成了。

呵呵，好像還有點(diǎn)東西，菜單的鏈接有問(wèn)題，如何解決在新窗口中的Anchor鏈接指向的頁(yè)面在我們指定的框架中顯示？首先還是要強(qiáng)調(diào)，每個(gè)popupwindow都是一個(gè)window對(duì)象，使用parent可以取得上級(jí)的對(duì)象，我的處理方法是在主窗口中定義了一個(gè)goto(url,target)的函數(shù)，這個(gè)函數(shù)負(fù)責(zé)在主窗口中將URL正確的進(jìn)行跳轉(zhuǎn)，帶出來(lái)的問(wèn)題是，怎么讓popwindw正確的調(diào)用這個(gè)函數(shù)，第一層菜單使用parent.goto，第二層菜單使用parent.parent.goto,第三層使用.....

最后一個(gè)就是解決alt-tab的問(wèn)題，這個(gè)問(wèn)題說(shuō)起來(lái)也簡(jiǎn)單，當(dāng)alt-tab處理的時(shí)候隱藏IE窗口會(huì)觸發(fā)document.onfocusout事件，在這個(gè)事件中對(duì)所有的popwindow?進(jìn)行關(guān)閉即可，實(shí)際測(cè)試的時(shí)候，卻發(fā)現(xiàn)如果不對(duì)IE窗口的內(nèi)容進(jìn)行點(diǎn)擊操作（鼠標(biāo)劃過(guò)不算），不會(huì)使得document取得焦點(diǎn)，也就無(wú)法觸發(fā)onfocusout事件，簡(jiǎn)單的做法是生成菜單之后調(diào)用一下document.focus()函數(shù)，這個(gè)函數(shù)可能會(huì)將焦點(diǎn)移動(dòng)，所以不是很好，但是找不到解決的辦法了?

沒(méi)啥藏著掖著的，源代碼下載test.rar (7.97 kb)

以下是測(cè)試代碼，包含鼠標(biāo)懸停、自動(dòng)創(chuàng)建和右鍵菜單，詳細(xì)請(qǐng)參考?jí)嚎s包中的東西

<style?type="text/css">
??#fm_MainContainer
??{
????width:100%;
????height:20px;
????border:solid?menu?1px;
????background-color:ghostwhite;
????padding:3px;
????font-size:10pt;
????color:menu;
??}
??#fm_MainContainer?a
??{
????padding-left:15px;
????padding-right:15px;
????border-left:solid?2px?#104E8B;
????border-right:solid?1px?#104E8B;
????text-decoration=none;
????color:blue;
????font-size:10pt;
????font-weight:bold;
????background-color:;
??}
??#fm_MainContainer?a:hover
??{
????text-decoration=underline;
????color:red;
????background-color:yellow;
??}
??#fm_Container
??{
????background-color:#E8E8E8;
????height:19px;????
????cursor:hand;
????width:150;
????padding-right:3px;
????border-bottom:solid?1px?menu;
????border-left:solid?5px?#B0C4DE;????
??}
??#fm_Container?a
??{
????padding-left:15px;
????padding-right:15px;
????font-size:10pt;
????text-decoration=none;
????color:blue;
????font-weight:normal;????
??}
??#fm_Container?a:hover
??{
????text-decoration=underline;
????color:red;
????background:?url(goto.png)?no-repeat;
??}
</style>
<script?type="text/javascript"?src="../framemenu.js"></script>
<script?type="text/javascript">
??//系統(tǒng)生成的菜單如果包含有下級(jí)菜單在菜單項(xiàng)的左邊顯示的圖片
??FrameMenuConfig.FolderImage="leftbtn.png";
??//系統(tǒng)菜單生成的結(jié)構(gòu)為<div?><a>...</a></div>,此處設(shè)置div的顯示風(fēng)格，a的顯示風(fēng)格請(qǐng)附帶在div中設(shè)置
??FrameMenuConfig.CssPrefix="#fm_Container";
??//insert函數(shù)直接插入一格記錄，格式為?父親代碼、節(jié)點(diǎn)代碼、節(jié)點(diǎn)顯示文本、節(jié)點(diǎn)URL、節(jié)點(diǎn)的目標(biāo)框架,目標(biāo)框架支持_self和_blank.
??FrameMenu.insert(null,"a","滾動(dòng)規(guī)劃");
??//add2函數(shù)插入一個(gè)菜單，返回這個(gè)菜單的父親節(jié)點(diǎn)的實(shí)例,格式為?節(jié)點(diǎn)顯示文本、節(jié)點(diǎn)URL、節(jié)點(diǎn)的目標(biāo)框架,目標(biāo)框架支持_self和_blank.節(jié)點(diǎn)的ID自動(dòng)生成
??FrameMenu.insert(null,"b","立項(xiàng)管理").add2("立項(xiàng)1").add2("立項(xiàng)2");
??//add函數(shù)插入一個(gè)菜單，返回這個(gè)新的菜單的實(shí)例,格式為?節(jié)點(diǎn)顯示文本、節(jié)點(diǎn)URL、節(jié)點(diǎn)的目標(biāo)框架,目標(biāo)框架支持_self和_blank.節(jié)點(diǎn)的ID自動(dòng)生成
??FrameMenu.insert(null,"c","工程實(shí)施").add("工程實(shí)施1").add("工程實(shí)施1_1");
??FrameMenu.insert(null,"d","驗(yàn)收管理").add2("測(cè)試用例").add2("測(cè)試用例");
??FrameMenu.insert(null,null,"系統(tǒng)菜單").add2("用戶管理").add2("測(cè)試用例").add2("測(cè)試用例").add("角色權(quán)限").add2("角色授權(quán)").add2("用戶授權(quán)").add2("資源授權(quán)");
??FrameMenu.insert(null,null,"幫助系統(tǒng)").add2("關(guān)于本系統(tǒng)").add2("退出系統(tǒng)");
??FrameMenu.insert("a","a1","本地文件","localfile.htm","body");
??FrameMenu.insert("a","a12","新浪網(wǎng)(彈出窗口)","http://wwww.sina.com","_blank");
??FrameMenu.insert("a","a13","多級(jí)菜單");
??FrameMenu.insert("a13","a13_1","新浪網(wǎng)(本窗口)","http://www.sina.com","_self");
??FrameMenu.insert("a13","a13_2","新浪網(wǎng)(本窗口)","http://www.sina.com");
??FrameMenu.insert("a13","a13_3","新浪網(wǎng)(Body)","http://www.sina.com","body");
</script>
<body?topmargin="0"?leftmargin="0"?οncοntextmenu="FrameMenuConfig.showMenu();return?false;">
??這個(gè)是TopFrame，Name=TopFrame
??<div?id="fm_MainContainer">系統(tǒng)菜單是安排在這里滴，嘻嘻</div>
??<br/><button?οnmοuseοver="FrameMenuConfig.showMenu()">鼠標(biāo)懸停方式顯示完整菜單</button>
<script?defer>
??FrameMenuConfig.createFrameMenu("fm_MainContainer",false);
</script>
</body>

?

轉(zhuǎn)載于:https://www.cnblogs.com/JeasonZhao/archive/2007/11/14/958763.html

總結(jié)

以上是生活随笔為你收集整理的使用window.createPopup创建无限级跨帧下拉菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。