======================================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
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
