詳解iframe製作三級串聯功能表

起源
任務本來是交給新來的同事做的，但由於新同事上手較慢，而功能卻著急上線使用，不得已就得親自動手了。

Task：將原有只包含一級欄目的菜單調整為支援三級級聯的菜單

實現：滑鼠移至上方在一級菜單時，彈出二級下列菜單，滑鼠移至上方在某二級菜單時，彈出三級下拉式功能表，遺留代碼如下：

<p id="main">    <iframe src='navbar.do' width=800 height=40></iframe>    <iframe src='main_content.do'></iframe></p>

遇到的問題：

原功能使用iframe分別載入頁面的導覽列和內容地區，實現上本無可厚非（頻繁使用iframe實在不是最佳實務），但新加的二三級欄目破壞了原有的頁面結構，由於導覽列是固定高度的，下拉式功能表的加入，固定高度導致下拉式功能表的內容被包含它的iframe所遮擋。

：紅線是上下兩個iframe的分界線

第一直覺想到的方案是將導覽列的內容從iframe中出，放置於首頁面中

<p id="main">    <p id="nav-bar"></p>    <iframe src='main_content.do'></iframe></p>

問題是解決了，感慨也有，那就是：

我們不缺碼農，缺少的是設計師，任何不經過思考的設計都是坑爹

再思考
回到這個問題，琢磨一下初始的設計，作者使用兩個請求分別載入導覽列和頁面主體內容地區，一般說來，首頁內容地區的商務邏輯是確定的，所以內容地區也用不著使用iframe來實現，合理的頁面配置應該是下面的樣子

<p id="main">    <p id="nav-bar"></p>    <p id="content"></p></p>

補充
測試火急火燎的跑來，著急的說道，又發現問題了，下拉式功能表是可以看到了，但是content中顯示的視頻卻擋住了部分下拉式功能表，效果如：

視頻載入完畢之後下拉式功能表中綠色部分會被視頻覆蓋而顯示不完整，
描述一下實際的業務情境：視頻是採購的第三方的服務，通過在頁面中動態載入第三方指令碼動態產生embed標籤進而播放視頻

為什麼
給動態產生的embed元素設定z-index屬性是否可以呢？很失望，不奏效。
那是什麼原因呢？
之後發現了flash的渲染模式wmode參數，預設情況下wmode=window，主要是基於效率考慮，這就導致預設顯示方式下flash總是會遮住位置與他重合的所有html，設定wmode=Opaque可以解決此類問題，此時flash不會在高於瀏覽器html渲染表面，而是與其他元素一樣在同一個頁面上。具體資訊可以參考這裡.

接下來的工作就是找到由指令碼動態產生的embed元素，並且為其設定wmode參數為Opaque，代碼如下：

var timer = setInterval(function(){    var elem = document.getElementsByTagName("embed")[0];    if( elem ){        elem.setAttribute("wmode","opaque");        clearInterval(timer);    }}, 100 );

OK了嗎!
測試發現問題依舊，到底怎麼回事，為什麼沒起作用呢？
wmode用來設定flash的渲染模式，由於我們代碼中embed元素是動態產生的，在我們找到embed元素並為其設定渲染模式時，此時flash已經渲染完成，再次設定其wmode是不會有效果的， 怎麼辦？

• 聯絡廠商解決，讓其指令碼在產生embed元素是預設指定渲染模式為opaque，時效上應該會比較慢，況且廠商對於我們的建議是否採納也未可知。

• 既然embed元素是動態產生的，那我們自己是否也可以去做同樣的事情呢，在找到embed元素後，我們對embed元素進行修改，刪除flash廠商產生的embed元素，插入我們修改過後的embed元素。

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程