Work with mip widget full height

mip-widget-full-height 是一个将页面高度上报到框架页面的组件。在页面中引用该组件后，iframe-shell 就可以收到对应的消息，从而调整容器高度，实现任意动态高度的 MIP 页面嵌入非 MIP 页面的功能。

MIP 页面

要使用全高挂件，在 MIP 页面底部，需要引入 mip-widget-full-height 组件：

<script src="https://c.mipcdn.com/static/v1/mip-widget-full-height/mip-widget-full-height.js"></script>

此后，在页面中任意一个位置，使用该组件：

<mip-widget-full-height layout="nodisplay"></mip-widget-full-height>

就完成了 MIP 页面的修改。

容器页面

容器页面首先需要获取 iframe-shell2。我们假设你已经完成了相应的工作。

在页面中准备一个容器：

<div id="xxxxx"></div>

然后初始化一个 iframe-shell，如下：

var iframeShell = require('iframe-shell2');
var container = document.querySelector('#xxxxx');

var Loader = iframeShell.loader;

var loader = new Loader({
    url: 'https://www.mipengine.org/', // 要加载的 URL
    useMipCache: false, // 如果是测试，传 false，不走 cache；若百度内部网站，建议传 true，使用百度的 mip cache
    viewer: {
        target: container,
        height: '500px' // 初始高度
    }
});

loader.on('created', function () {
    loader.viewer.iframe.scrolling = 'no'; // 关闭页面的滚动功能
});
loader.on('mip-mippageload', function () {
    alert('页面加载完成'); // 加载回调
});
loader.on('mip-full-height-update', function (_, event) {
    // 更新高度的回调函数
    loader.viewer.setConfig({
        height: event.data.scrollHeight + 'px'
    });
});
// 创建并附着 iframe-shell
loader.create();
loader.attach();

这样就得到了一个嵌入页面的全高 MIP 挂件。