天天看點

ios下iframe中fixed定位失效 完美替代方案 并可在iframe裡做上拉加載這種操作

======================================2019-1-23更新=========================================

樓主這裡要糾正一個問題   下面的幹貨  再實測的時候發現   底部會出現大概4像素的白邊 這個東西 樓主找了很久

最後 隻能 笃定  是 因為 css 的calc的計算  用百分比減去px的時候 會出現誤差  就是樓主說的 大概4像素的白邊  這裡樓主

提供一個解決辦法  利用flex的  grow 屬性     把頭設定 grow:0  不增長   然後把iframe 或者object 對象 設定成 grow:1 讓他

去填充剩下的空間,這樣就解決了白邊的問題

======================================2019-1-23更新=========================================

最近忙的 好久沒寫部落格了   正好昨天處理了一個問題  記錄下來 分享給大家

1 項目需求

    要求 vue單頁項目引入外部網頁,頭部由自己寫,然後做互動 完成功能

   翻譯一下就是:  vue單頁項目 嵌套 跨域的 iframe頁面 實作 fixed定位及iframe中上拉加載

2 實作

    第一版本 我肯定先想到了 iframe  畢竟很久的東西了,不過 剛期初嵌套進來還好,什麼高度自适應啥的   我就不多說了,網上有很多文章介紹,我隻提一點新的東西,就是  ios的微信内置浏覽器  傳回被放在了頁面下部,這就很有意思了,如果你iframe内嵌進來的頁面 最下面有一個fixed定位的東東,就算你費盡心思定在最下面了,你會發現 安卓還好,在ios裡  你還是看不到,不過 我告訴你  是因為 ios微信内置浏覽器的傳回按鈕給擋上了   你需要做的就是   vue的 這個單頁裡  最外層的div 添加一段css樣式  如圖

ios下iframe中fixed定位失效 完美替代方案 并可在iframe裡做上拉加載這種操作

先利用 css 的 calc  讓 高度為  總高減去 44   ,其中44 是我估算的 微信下面的 傳回導航高度     前面的 ~ 是因為 我這段css寫在less裡  是以  在less中 如果想用calc 就需要添加~   這段是幹貨

然後說說  解決 iframe裡的fixed定位吧     安卓ok  ios崩潰 大家都懂

我的思路   從父頁面  傳進來一個高度  然後 指派個 iframe裡面的頁面   這裡 由于跨域  我用的postmessage     這個你要不知道 你可以白幹前端了

然後再iframe裡     最外層放一個div  寬高100% 然後position:relative  然後裡面的内容分2部分  顯示的頁面  相對定位 這個div

然後底部原來想fixed的   也absolute  相對這個div定位      這裡    實作的效果  第一頁 目前确實可以定位在最下面了

然後就是滾動一直在最下面了    這裡就要 讓 這個原來想fixed定位的導航的 top值 一直等于 第一頁的top值 + 滾動的距離

也就是  top=top+ $(window).scrollTop()   這裡 基本實作了fixed定位的問題  

不過!!!重點   你會發現  他會有一些嘚瑟(東北話) ,翻譯一下 就是 你滾動頁面 他就顫抖   因為是計算的嘛  

如果現在能滿足你   那就不用往下看了  去實作吧 

   第二版本 通過上面的代碼 我覺得 還是不行  是以 管段revent了   不需要讓他耽誤我們的時間  那怎麼做呢

我就用了 h5新出的  Object标簽  實作的 

ios下iframe中fixed定位失效 完美替代方案 并可在iframe裡做上拉加載這種操作

因為是公共頁面 是以 data 我換成了動态的url    然後你會發現  是可以引入的  而且 fixed定位 進來就好使  你不需要再去一頓定位了

然後說說上拉加載 ,網上的文章 基本沒有說  附帶上拉加載的   這裡 我用的是 mintUi的  loadmore元件 完成上拉加載的

利用上面object後  你會發現 拉動不了 你一拉動  頁面就歸為  一直到你都取完值  才可以滾動

是以你要做以下操作 

1 再load标簽的上一層div 加入 2個樣式

ios下iframe中fixed定位失效 完美替代方案 并可在iframe裡做上拉加載這種操作

然後 再加上一個計算的高度  去滿足不同的手機  

ios下iframe中fixed定位失效 完美替代方案 并可在iframe裡做上拉加載這種操作

如果 你有和我一樣的問題  我想你現在已經懂了

我把  父頁面 和子頁面的代碼 抽出來   供看不懂的人下載下傳  希望可以幫到你們  不過  還是要先看部落格 再下載下傳 才能了解如何操作

代碼中  我删除了一下 關于公司的資訊 不過 解決問題的代碼 都在這裡  

下載下傳位址 :https://download.csdn.net/download/gaoqiang1112/10880704

ios下iframe中fixed定位失效 完美替代方案 并可在iframe裡做上拉加載這種操作