ios下iframe中fixed定位失效 完美替代方案 並可在iframe裡做上拉載入這種操作
最近忙的 好久沒寫部落格了 正好昨天處理了一個問題 記錄下來 分享給大家
1 專案需求
要求 vue單頁專案引入外部網頁,頭部由自己寫,然後做互動 完成功能
翻譯一下就是: vue單頁專案 巢狀 跨域的 iframe頁面 實現 fixed定位及iframe中上拉載入
2 實現
第一版本 我肯定先想到了 iframe 畢竟很久的東西了,不過 剛期初巢狀進來還好,什麼高度自適應啥的 我就不多說了,網上有很多文章介紹,我只提一點新的東西,就是 ios的微信內建瀏覽器 返回被放在了頁面下部,這就很有意思了,如果你iframe內嵌進來的頁面 最下面有一個fixed定位的東東,就算你費盡心思定在最下面了,你會發現 安卓還好,在ios裡 你還是看不到,不過 我告訴你 是因為 ios微信內建瀏覽器的返回按鈕給擋上了 你需要做的就是 vue的 這個單頁裡 最外層的div 新增一段css樣式 如圖
先利用 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標籤 實現的
因為是公共頁面 所以 data 我換成了動態的url 然後你會發現 是可以引入的 而且 fixed定位 進來就好使 你不需要再去一頓定位了
然後說說上拉載入 ,網上的帖子 基本沒有說 附帶上拉載入的 這裡 我用的是 mintUi的 loadmore元件 完成上拉載入的
利用上面object後 你會發現 拉動不了 你一拉動 頁面就歸為 一直到你都取完值 才可以滾動
所以你要做以下操作
1 再load標籤的上一層div 加入 2個樣式
然後 再加上一個計算的高度 去滿足不同的手機
如果 你有和我一樣的問題 我想你現在已經懂了
我把 父頁面 和子頁面的程式碼 抽出來 供看不懂的人下載 希望可以幫到你們 不過 還是要先看部落格 再下載 才能理解如何操作
程式碼中 我刪除了一下 關於公司的資訊 不過 解決問題的程式碼 都在這裡
下載地址 :https://download.csdn.net/download/gaoqiang1112/10880704