記一次在object空間上加懸浮工具條過程

時間 2019-11-11

標籤一次 object 空間懸浮工具條過程简体版

原文原文鏈接

以前客戶提了一個需求：本來應用中有一個頁面以下面的佈局：html

頁面上面的是一個工具條：下面是word在線編輯區域，工具條中有些功能是word自己不存在的；代碼以下:jquery

<frameset>
    <frame id="iframe1" name="iframe1" src="iframe1.jsp" />
    <frame id="iframe2" name="iframe2" src="iframe2.jsp" />
</frameset>

如今的需求就是，要把這個工具條懸浮在在線編輯區域之上，就相似下面這種界面：框架

本來頁面的代碼結構是，一個frameset包含2個frame，工具條frame1，經過window.parent.frame2調用frame2中object控件的方法，實現交互。接到需求以後首先嚐試可行性分析，作了以下嘗試：jsp

用樣式或者腳本使一個div懸浮在一個空白頁面之上（可行）
iframe中的div懸浮出父頁面外面來（沒找到解決方案，應該是不行的，iframe中的元素是沒法跑出iframe的可見區域外面的）
懸浮一個div在iframe之上（可行）；

因而經過第3點的嘗試，若是採用第三種方案來解決，那麼就須要把frame1中的代碼寫到父頁面中就是frameset標籤所在的頁面，並且要取消frameset這種結構，採用普通html，<body>標籤中嵌入iframe2的方式，這樣本來iframe1中的腳本改動就會很大，並且還要檢查錯誤，有些錯誤仍是沒法排查的，由於歷史緣由，除非你能理解工具條中每一個按鈕的功能。並作出修改。可是本着能解決問題，能夠試試看的思路，嘗試了一下，發現，本來在空白頁面上，能夠懸浮於iframe之上的div如今不行了，被iframe中的<object>控件遮擋了。後來到網上找資料發現：

層之間的關係是div<object<iframe

因此解決思路就直接把iframe浮起來並給與絕對位置就好了

<html>
    <head>
    </head>
    <body>
        <iframe id="iframe1" style="position:absolute;top:100px;left:0px;" name="iframe1" src="iframe1.jsp" />
        <iframe id="iframe2" name="iframe2" src="iframe2.jsp" />
    </body>
</html>

改爲這樣子基本就知足需求了,如今咱們只須要調整iframe1中的樣式和按鈕的佈局,剩下的腳本都不須要修改,他和iframe2仍是處於同一個位置,同一段代碼在這種狀況下是能夠用的。可是爲了實現更強大的功能，能夠拖動，就像qq同樣，在界面中拖動，而且在自動隱藏在兩邊。因而作了以下修改：

拖動框架採用jquery.ui的draggable.js
經測試發現draggable.js沒法拖動iframe，可是能夠拖動div
因而在iframe下面墊了一層露出可是比iframe多出一個標題欄和邊框的區域給與拖動

可是新的代碼中的div的標題仍是被iframe2中的object標籤覆蓋，因而在div下面再墊一層iframe代碼以下：

<html>
    <head>
    </head>
    <body>
        <div id="test" style="position:absolute;top:100px;left:0px;width:110px;height:205px;z-index:998;cursor:move;">
            <div style="height:25px">工具條</div>
            <iframe id="iframe1" style="position:absolute;top:5px;left:5px;width:100px;height:170px;z-index:999" name="iframe1" src="iframe1.jsp" />
            <iframe style="position:absolute;top:0px;left:0px;width:110px;height:205px;z-index:-1" />
        </div>
        <iframe id="iframe2" name="iframe2" src="iframe2.jsp" />
    </body>
</html>

這時候能夠點擊工具條和大概小小的5px的邊框進行拖動這個工具條了

修改以後的佈局的層級關係以下

轉自：http://linjunlong.com/p/1194.html工具