H5页面PC富文本内容自适应显示

接上篇博客，现在增加一个新需求：h5页面B区显示富文本HTML片段。

功能描述

• 要求

  • 有一段PC端显示的富文本HTML片段，在手机H5页面B区上加载显示

  • 保持PC端的样式缩放适应手机屏幕

  • 如果HTML富文本有图片

    • 图片默认不加载
    • 当手机可视区间到B区时候，图片触发懒加载显示
    • 点击富文本图时候，有弹层加载图片，可放大查看

• 提示

  • 可以考虑用iframe方式处理富文本
  • 但是要考虑到iframe的父子页面的通信和兼容性
  • 还有考虑到iframe里富文本图片懒加载导致高度变化带来的父页面的高度自适应

具体实现过程

为什么选择iframe

看到需求时，第一想到的是只是显示一段富文本内容，为什么要用iframe，直接显示不就行了。 iframe还是有挺多缺点的：

1. 会产生很多页面，不容易管理
2. 不容易打印
3. 浏览器的后退按钮无效
4. 代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
5. 多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。