使用iframe解决内容层中有图片加载时候滚动的问题

问题描述与解决

在我们做开发时候，常常有这种需求，就是通过json获取到一段图文，然后再一个div层中进行展示。平常我都是使用better-scroll来解决手机端层内滚动。

better-scroll:https://better-scroll.github.io/docs/zh-CN/guide/#起步

但是当有图片的时候，需要动态判断每张图片是否加载完，然后再重新refresh，当图片量大的时候，这种方法明显不合适了。于是，我就考虑来动态创建一个iframe来解决多图文情况下的内容滚动问题。

首先在页面中插入一个iframe

<iframe frameborder="0" id="water-iframe" class="water-iframe"></iframe>

然后开发好图文内容的css样式，然后汇总到js中：

var list = [
  "http://statics.qdxin.cn/uploadfile/2023/0607/20230607074654393.jpg", 
    "http://statics.qdxin.cn/uploadfile/2023/0808/20230808025512164.jpg", 
    "http://statics.qdxin.cn/uploadfile/2023/0607/20230607074807872.jpg"
];
var alt = [
  '青岛一中考点外，青岛二中分校高三语文班主任姜老师',
  '好是青岛一中的考生，这次“主场作战”让她安心很多。',
  '6岁的朱光荷今年就要上一年级了，今天她来考场外给大12岁的哥哥加油助威'
]

// 遍历图文内容，拼接出结构
var waterItems = '';
$.each(list, function(index, item) {
  let desc = alt[index];
  let itemStr = `
    <li>
        <div class="img-x">
            <img src="${item}">
        </div>
        ${desc}
    </li>
  `;
  waterItems += itemStr;
});

// 编辑好内容的样式 以及结构
var waterHtml = `
    <style>
      *{padding: 0;margin: 0}
      .water-ul{
        ....
      }
      ...
    </style>
    <ul class="water-ul" id="water-ul">${waterItems}</ul>
`;

// 获取iframe，当然这里动态创建也可以
var $iframe = $('#water-iframe');
var waterIframe = $iframe[0].contentDocument;
// 将图文结构插入到iframe的body中
waterIframe.body.innerHTML = waterHtml;

获取iframe中的document对象，通常需要这么判断：

<iframe id="container"></iframe>
var ifr = document.querySelector("#container");
var ifrDoc = ifr.contentWindow || ifr.contentDocument;

当我们对iframe设置

width:100%;
height:100%

我们会发现，因为使用了iframe，所以内部的内容可以自己滚动，不用去监听img图片是否加载完成。

相关资料