PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HTML+CSS > 正文

    iframe高度如何自适应内容?

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。...
    JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。

    如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。

    iframe内容未知,高度可预测

    这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用javascript改变高度。常用的兼容代码有:

    function setIframeHeight(iframe) {
    if (iframe) {
    var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
    if (iframeWin.document.body) {
    iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
    }
    }
    };
    
    window.onload = function () {
    setIframeHeight(document.getElementById('external-frame'));
    };

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-70-3313-1.html
    相关热词搜索: