Iframe高度自适应

1. 同域iframe高度自适应

setSameDomainIframeHeight: function (ifmId) {
        var ifm = document.getElementById(ifmId);
        var ifmHeight = ifm.contentDocument.body.scrollHeight;
        ifm.height = ifmHeight;
}

2. 跨域iframe高度自适应

setCrossDomainIfrmHeight: function (ifmId) {
    var myEventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var myEventListener = window[myEventMethod];
    var myEventMessage = myEventMethod == "attachEvent" ? "onmessage" : "message";
    //----接收消息
    myEventListener(myEventMessage, function (e) {
        debugger;
        console.log("e=", e);
        if (e.data === parseInt(e.data))
            document.getElementById(ifmId).height = e.data + "px";
    }, false);
    //----iframe加载完毕向父窗体发送消息
    document.getElementById(ifmId).onload = function () {
        console.log("window.parent", window.parent);
        window.postMessage(document.body.scrollHeight, "*");
        /*  window.parent.postMessage(document.body.scrollHeight, "*");*/
    };
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网...
    布拉德皮蛋_qzy阅读 8,664评论 0 3
  • 解决iframe高度自适应的问题 最近做某项目,要用到iframe实现类似tab切换的功能,遇到高度不能自适应的问...
    睡在下铺的丑哔阅读 4,657评论 0 0
  • JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验...
    web_afei阅读 4,071评论 0 1
  • 最近在做pc端项目的时候由于某些原因吧用了很少接触的iframe;虽然知道很多坑,但是由于项目需要所以没有办法的使...
    小_花花哟阅读 3,783评论 1 0
  • 前不久(2014年夏),在县城大街上,阿金瞧一中年女士脸目像,就说:“你第一个生的是儿子。”那女士有点惊讶问:“你...
    镇南方良金阅读 1,443评论 0 1