======================================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