• iframe 里的高度适应的问题


    iframe 这个东西功能是很强大,但是有一个巨大的问题就是高度自适应的问题;

    不过这个问题,百度或者谷歌上有很多解决办法,但是,很多时候都有兼容性问题; 所有我就每个方法都试了一遍,终于找到了一个

    感觉很牛的样子,不需要用到js 就可以让iframe 里的内容覆盖整个页面,感觉很舒服。哈哈哈

    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    <style type="text/css">
        body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;overflow: hidden;}
    </style>
        <body>
            
            <div>
                <iframe id="external-frame" src="https://cdn-huoshu.fire2333.com/landpages/rxgl/template/4039/index.php?pt=7590&footer_id=1" width="100%" height="100%" scrolling=" no"></iframe>
            </div>
        </body>
    
    </html>

    这样,就可以完美的解决这个问题啦;

    有三点要注意哦:

    第一:一定要已html开头,而不是用<!DOCTYPE html>开头

    第二:body的overflow:hidden ; 一定不要忘记加;

    第三:iframe 的高度100%一定要记得加上。这样就解决了我的问题了;

    虽然不知道这种实现的原理是什么,希望有知道的朋友可以告诉我下。

    这在跨域的时候,是真的好用,尤其是不能修改iframe 里的页面的时候;

    同域的话:

    有一段js代码就可以解决这个问题啦;

    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'));
    };

    在页面里插入这个就好啦;

    我觉得这两个方法完美的解决了我公司一些php们的问题。

    天天都在用iframe结果用的还那么不清楚,实在搞不懂。

    尤其是某个php,什么css js html都不会,真心不知道他是怎么成为php的。连获取元素都不会。很气

    瞎抱怨下,反正没人看。哈哈哈哈,总之这两种方法我觉得很好。赞;

  • 相关阅读:
    Ubuntu 20.04下EasyConnect兼容性问题临时解决方案
    Ubuntu 20.04 LTS安装搜狗输入法,只需三条命令,还能自动更新
    Java笔记: 继承成员覆盖和隐藏
    Java扫雷游戏: JMine
    Emacs: 设置窗口标题格式
    Java笔记: protected的真正含义
    Java笔记: 初始化块
    Ubuntu跨版本安装软件
    百度编辑器 Ueditor 增加字体
    AspCms 升级百度编辑器
  • 原文地址:https://www.cnblogs.com/AiMuzi/p/8867107.html
Copyright © 2020-2023  润新知