mipengine / mip2

MIP (移动网页加速器)通过优化网页JS、控制资源加载顺序,达到加速网页的效果。
https://www.mipengine.org/
MIT License
184 stars 49 forks source link

iframe 中使用 MIP 页面,内置 img 组件不执行 #523

Closed chenqiushi closed 5 years ago

chenqiushi commented 5 years ago

BUG 描述 清晰和准确的描述 Bug 是什么

开发者反馈,在 iframe 中使用 mip 站点页面,需求是待 onload 后再动态赋值 iframe 高度进行自适应,发现该页面的图片组件不会展示。

分析应该是 iframe 没有初始高度,导致 mip-img 组件的 viewportCallback/layoutCallback 生命周期没执行。

这种 case,我们是否需要提供比较合理的解决办法?

复现步骤

可复现的代码:

<!DOCTYPE html>
<html lang="zh_cn">

<head>
    <meta charset="UTF-8">
    <title>商业落地页-agent</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache, must-revalidate">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body style="background: #fff;">
<iframe id="main-iframe" src="https://isite.baidu.com/site/kaisenxue.com/fb12b551-f8dd-4803-9048-c76256c68476?showpageinpc=1"
    frameborder="0" width="100%" scrolling="no"></iframe>
</body>
<script>
    var iframe = document.getElementById('main-iframe');
    iframe.onload = function () {
        iframe.height = 3000;
    }
</script>

</html>

期望结果 清晰和准确的描述你期望的结果

截图 如果合适,添加问题相关的截图

环境及版本信息:

其他信息 其他补充信息

Brunoon commented 5 years ago

图片不显示原因是:

有两个解决方法: