使用window.createPopup创建无限级跨帧下拉菜单
站點鏈接
RSS
? 先帖樣子
????
使用層或者其他技術所實現的JS菜單不能解決的問題就是這些菜單不能跨幀，也就是說在Frame之間的時候無可奈何，所幸的是IE5+提供了createPopup這個函數，可以提供窗口的創建，使用createPopup需要注意以下幾個問題:
1、函數沒有任何參數
2、CreatePopup函數返回的值是新窗口的句柄，這個窗口和普通的窗口一樣，所有該有的東西都有。
3、新窗口的parent屬性可以對父級窗口（調用createPopup函數的窗口進行訪問）
4、一個窗口只能創建一個popup窗口，新調用createPopup將會吧以前的窗口關閉。
5、新窗口的內容初始的時候是空的，沒有任何內容，使用document.write和document.body.innerHTML設置值
6、窗口顯示的時候調用popwindow.show函數，調用契約為 show(left,top, width, height, document.body);最后一個參數指明位置屬性相對的對象
7、窗口隱藏直接調用hide函數。
8、在父級窗口中點擊鼠標將會自動將popwindow隱藏。
9、銷毀父親窗口不一定銷毀其創建的popwindow，前提是保存窗口句柄的對象是否被銷毀。
10、使用alt-tab轉換窗口的時候，有時這些新窗口會懸浮在桌面頂層，不會隨IE窗口轉到后臺而隱藏（IE6、IE7都是）
11、新窗口的對象不能使用父窗口的CSS風格，需要手工復寫
12、新窗口中的鏈接（Anchors）需要注意點擊之后鏈接顯示的窗口是當前的窗口，一般無效。
13、新窗口中的JavaScript出現錯誤的時候并不會在當前的IE狀態欄中提示！
14、新窗口的CSS風格不支持expression，暈！
15、顯示窗口的時候（調用show函數）必須指定窗口的位置和大小，尤其是大小，新窗口可不能自動進行縮放！
實現跨幀菜單首先確定顯示方式，每一級的菜單都是顯示在一個Popwindow中，如前所述，在一個窗口中只能有一個popwindow,如圖顯示二級菜單就無法顯示了，如何解決這個問題呢？
剛才我們提到，popwindow對象本身就是一個完整的窗口對象，要解決這個問題的最直接的辦法就是，下級菜單的生成有父親菜單所在的窗口（不管是主窗口還是popwindow）調用createPopup生成，這樣，各級菜單都可以擁有自己的popwindow,而且可以自動的在同級菜單中進行切換，具體的腳本如下
/*...*/
var?popw=ele.document.parentWindow.window.createPopup();
/*...*/
層次結構可以構造菜單的基本樣式，剛才提到，popwindow不支持CSS風格，也就是說需要手工將CSS風格寫到popwindow中，寫CSS風格可以使用document.write方式或者直接構造styleSheet對象然后插入rule的方式（注意，直接使用document.body.innerHTML寫的style標簽好像沒有生效），我采用前者，主要原因是，我在主窗口中配置菜單的顯示風格，而后將這些顯示css風格的文本信息直接保存下來，然后對每個新窗口進行寫操作，這樣就可以保持每級菜單的CSS風格完全一致。
讀取主窗口CSS的代碼如下
????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風格才寫入到新的窗口中。
然后涉及到菜單的數據結構的定義，這個定義比較簡單，就不扯了，用膝蓋也能想出來。我這邊處理的時候為了防止函數被重復定義，使用了簡單的類靜態函數的方式進行定義。
到現在為止，我們可以畫出一層一層的菜單，在每層的菜單項上掛接onmouseover處理函數就可以自動彈出下級菜單，一切看起來已經完成了。
呵呵，好像還有點東西，菜單的鏈接有問題，如何解決在新窗口中的Anchor鏈接指向的頁面在我們指定的框架中顯示？首先還是要強調，每個popupwindow都是一個window對象，使用parent可以取得上級的對象，我的處理方法是在主窗口中定義了一個goto(url,target)的函數，這個函數負責在主窗口中將URL正確的進行跳轉，帶出來的問題是，怎么讓popwindw正確的調用這個函數，第一層菜單使用parent.goto，第二層菜單使用parent.parent.goto,第三層使用.....
最后一個就是解決alt-tab的問題，這個問題說起來也簡單，當alt-tab處理的時候隱藏IE窗口會觸發document.onfocusout事件，在這個事件中對所有的popwindow?進行關閉即可，實際測試的時候，卻發現如果不對IE窗口的內容進行點擊操作（鼠標劃過不算），不會使得document取得焦點，也就無法觸發onfocusout事件，簡單的做法是生成菜單之后調用一下document.focus()函數，這個函數可能會將焦點移動，所以不是很好，但是找不到解決的辦法了?
沒啥藏著掖著的，源代碼下載test.rar (7.97 kb)
以下是測試代碼，包含鼠標懸停、自動創建和右鍵菜單，詳細請參考壓縮包中的東西
<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">
??//系統生成的菜單如果包含有下級菜單在菜單項的左邊顯示的圖片
??FrameMenuConfig.FolderImage="leftbtn.png";
??//系統菜單生成的結構為<div?><a>...</a></div>,此處設置div的顯示風格，a的顯示風格請附帶在div中設置
??FrameMenuConfig.CssPrefix="#fm_Container";
??//insert函數直接插入一格記錄，格式為?父親代碼、節點代碼、節點顯示文本、節點URL、節點的目標框架,目標框架支持_self和_blank.
??FrameMenu.insert(null,"a","滾動規劃");
??//add2函數插入一個菜單，返回這個菜單的父親節點的實例,格式為?節點顯示文本、節點URL、節點的目標框架,目標框架支持_self和_blank.節點的ID自動生成
??FrameMenu.insert(null,"b","立項管理").add2("立項1").add2("立項2");
??//add函數插入一個菜單，返回這個新的菜單的實例,格式為?節點顯示文本、節點URL、節點的目標框架,目標框架支持_self和_blank.節點的ID自動生成
??FrameMenu.insert(null,"c","工程實施").add("工程實施1").add("工程實施1_1");
??FrameMenu.insert(null,"d","驗收管理").add2("測試用例").add2("測試用例");
??FrameMenu.insert(null,null,"系統菜單").add2("用戶管理").add2("測試用例").add2("測試用例").add("角色權限").add2("角色授權").add2("用戶授權").add2("資源授權");
??FrameMenu.insert(null,null,"幫助系統").add2("關于本系統").add2("退出系統");
??FrameMenu.insert("a","a1","本地文件","localfile.htm","body");
??FrameMenu.insert("a","a12","新浪網(彈出窗口)","http://wwww.sina.com","_blank");
??FrameMenu.insert("a","a13","多級菜單");
??FrameMenu.insert("a13","a13_1","新浪網(本窗口)","http://www.sina.com","_self");
??FrameMenu.insert("a13","a13_2","新浪網(本窗口)","http://www.sina.com");
??FrameMenu.insert("a13","a13_3","新浪網(Body)","http://www.sina.com","body");
</script>
<body?topmargin="0"?leftmargin="0"?οncοntextmenu="FrameMenuConfig.showMenu();return?false;">
??這個是TopFrame，Name=TopFrame
??<div?id="fm_MainContainer">系統菜單是安排在這里滴，嘻嘻</div>
??<br/><button?οnmοuseοver="FrameMenuConfig.showMenu()">鼠標懸停方式顯示完整菜單</button>
<script?defer>
??FrameMenuConfig.createFrameMenu("fm_MainContainer",false);
</script>
</body>
?
轉載于:https://www.cnblogs.com/JeasonZhao/archive/2007/11/14/958763.html
總結
以上是生活随笔為你收集整理的使用window.createPopup创建无限级跨帧下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： I/O流讲解
- 下一篇： Linux grep命令、Linux c