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

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