======================================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樣式 如圖
先利用 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