關於iframe中使用fixed定位的一些問題

2022-09-13 20:12:10 字數 712 閱讀 5822

先來看看position: fixed;的定義:生成絕對定位的元素,相對於瀏覽器視窗進行定位;

但是在iframe中使用fixed定位,實際上是相對於iframe視窗進行定位,原因在於iframe類似於建立了乙個瀏覽器視窗,在使用一些獲取滑鼠位置以及元素位置等方法的時候把iframe當作瀏覽器視窗來處理就行。

以下是一些在iframe中使用fixed需要考慮的常用js事件物件屬性與方法:

獲取滑鼠的位置:

e.clienty // 獲取滑鼠在瀏覽器視窗的y座標,在iframe中相對於iframe視窗

e.screeny  // 獲取的是滑鼠相對於螢幕的上邊距,不考慮iframe因素,

獲取元素的偏移量:

var position = object.getboundingclientrect();  //用於獲取某個元素相對於瀏覽器視窗的位置集合,在iframe中相對於iframe視窗

position.top  //獲取元素 "頂部" 距離瀏覽器視窗 "頂部" 的距離

position.bottom  //獲取元素 "底部" 距離瀏覽器視窗 "頂部" 的距離

position.left //獲取元素 "左側" 距離瀏覽器視窗 "左側" 的距離

position.right  //獲取元素 "右側" 距離瀏覽器視窗 "左側" 的距離

object.offsettop  //獲取元素距離 最近含有 」定位「 屬性標籤左側的距離

myeclipse中使用iframe問題

在網上下了個後台模板 結果放在myeclipse裡面效果顯示不出來 查了好多資料,發現是iframe的問題,下面是估計某個論壇上大家討論的結果 就貼出來吧 在用myeclipse中的jsp中用了table和iframe標籤來構成頁面的框架,執行伺服器後發現找不到頁面出現404錯誤,但是在webroo...

iframe中使用jquery查詢

今天在公司是給ckeditor新增乙個 是否顯示 標題的功能 難點 外掛程式的內容很多,功能相當強大,在短時間之內無法通讀和理解裡面的邏輯關係,而且修改的內容不能破壞外掛程式內部的邏輯關係,不能因為新增乙個功能而引入更多的問題,因此只能從區域性去解決這個問題 突破口 知道頁面時使用iframe框架插...

vue元件中使用iframe元素

需要在本頁面中展示vue元件中的超連結,位址列不改變的方法 goback 需要使同層元素不被覆蓋,可以加 不過html5有新的dialog元素用於對話方塊。iframe的一些方法 獲取iframe內容 var iframe document.getelementbyid iframe1 var iw...