哥伦布

iframe自适应内容高度

复制代码
<!--
 * @Description: 描述
 * @Version: 1.0
 * @Autor: Nanke_南柯
 * @Date: 2020-11-03 14:09:04
 * @LastEditors: Nanke_南柯
 * @LastEditTime: 2020-11-03 14:09:05
-->
<!DOCTYPE html>
<html lang="sv">

<head>
    <meta charset="utf-8" />
    <title>Iframe height demo</title>
    <style media="screen,print">
        #body {
            width: 70em;
            max-width: 100%;
            margin: 0 auto;
        }

        iframe {
            width: 100%;
            margin: 0 0 1em;
            border: 0;
        }
    </style>
    <script>
        /*
         * When the iframe is on a different subdomain, uncomment the following line
         * and change "example.com" to your domain.
         */
        // document.domain = "example.com";
        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;
                    console.log(iframeWin.document.documentElement.scrollHeight , iframeWin.document.body.scrollHeight);
                }
            }
        };
    </script>
</head>

<body>
    <div id="body">
        <h1>Iframe height demo</h1>
        <h2><code>iframe</code> <strong>with</strong> height adjustment</h2>
        <iframe src="iframe高度自适应-src.html"
            frameborder="0"
            id="external-frame" onload="setIframeHeight(this)"></iframe>
    </div>
</body>

</html>
复制代码
posted @   南柯Dream丶  阅读(252)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗
点击右上角即可分享
微信分享提示