iframe子页面结尾添加本script

iframe子页面结尾添加本script

<script type="text/javascript">
        function iframeAuto() {
            try {
                if (window != parent) {
                    //定位需要调整的frame框架(在父级窗口中查找)
                    var a = parent.document.getElementsByTagName("iframe");
                    for (var i = 0; i < a.length; i++) {
                        if (a[i].contentWindow == window) {
                            var h1 = 0, h2 = 0;
                            a[i].parentNode.style.height = a[i].offsetHeight + "px";
                            a[i].style.height = "10px"; //首先设置高度为10px,后面会修改
                            if (document.documentElement && document.documentElement.scrollHeight) {
                                h1 = document.documentElement.scrollHeight;
                            }
                            if (document.body) h2 = document.body.scrollHeight;
                            var h = Math.max(h1, h2); //取两者中的较大值
                            if (document.all) { h += 4; }
                            if (window.opera) { h += 1; }
                            //调整框架的大小
                            a[i].style.height = a[i].parentNode.style.height = h + "px";
                        }
                    }
                }
            }
            catch (ex) { }
        }
        //事件绑定的方法,支持IE5以上版本
        if (window.attachEvent) {
            window.attachEvent("onload", iframeAuto);
        }
        else if (window.addEventListener) {
            window.addEventListener('load', iframeAuto, false);
        }
   
    </script>

  

iframe宽高自适应的更多相关文章

  1. 从零开始学习前端开发 — 7、CSS宽高自适应

    一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...

  2. JQuery iframe宽高度自适应浏览器窗口大小的解决方法

    iframe宽高度自适应浏览器窗口大小的解决方法   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...

  3. jquery操作html中图片宽高自适应

    在网站制作中如果后台上传的图片不做宽高限制,在前台显示的时候,经常会出现图片变形,实用下面方法可以让图片根据宽高自适应,不论是长图片或者高图片都可以完美显示. $("#myTab0_Cont ...

  4. css 宽高自适应的div 元素 如何居中 垂直居中

    在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法 上代码 下面的是 结构代码 <div class=" ...

  5. 翻屏类 h5 适配方案:解决宽高自适应难题

    表格 图片等 宽度自适应  :width:100%;  box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及 ...

  6. css+background实现 图片宽高自适应,拉伸裁剪不变形

    图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性.  下面咱们在网上找两张宽高不一样的照片:     No.1                                      ...

  7. HTML5 图片宽高自适应,居中裁剪不失真

    一,使用 JS,先上效果图,右图为定死宽高的效果,左图为处理之后的 1, 主要思路是,在图片 onload 后,将图片的宽高比和 div 容器的宽高比进行比较, 2, 从而确定拉伸或者压缩之后是宽还是 ...

  8. 【CSS】三栏/两栏宽高自适应布局大全

    页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...

  9. iframe宽高百分百显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. SpringBoot原理—分析SpringBoot启动机制(starter机制)

    一:前言使用过springboot的同学应该已经知道,springboot通过默认配置了很多框架的使用方式帮我们大大简化了项目初始搭建以及开发过程.本文的目的就是一步步分析springboot的启动过 ...

  2. Pikachu-SSRF(服务器端请求伪造)

    SSRF(Server-Side Request Forgery:服务器端请求伪造) 其形成的原因大都是由于服务端提供了从其他服务器应用获取数据的功能,但又没有对目标地址做严格过滤与限制 导致攻击者可 ...

  3. maven依赖包无法更新下载

    在IDEA工程中导入已存在的module时,按默认设置,直到完成导入,结果所有的外部依赖包都无法更新下载,即使是更新了setting.xml配置文件信息,依旧是不能更新下载依赖包,现将具体的操作过程和 ...

  4. npm ERR! Cannot read property 'match' of undefined

    在Vue项目中运行npm i命令时直接提示npm ERR! Cannot read property 'match' of undefined错误了,此时需要把package-lock.json文件删 ...

  5. codechef Future of draughts

    难度 super-hard 题意 官方中文题意 做法 定义1:\(G\)为邻接矩阵,\(I\)为单位矩阵 定义2:\(H\)为转移矩阵,可以不动,即\(H=G+I\) 定义3:\(e_i(x_1,.. ...

  6. 金蝶云星空BOS开发视频分享

    https://vip.kingdee.com/school/implementCourseOnline

  7. c语言中 char* 和 unsigned char* 的区别浅析(转)

    原文:https://blog.csdn.net/guotianqing/article/details/77341657 背景最近在项目中遇到了一个编译警告,是因为定义的变量为char[],而在使用 ...

  8. AI机器人最高等级

    AI机器人最高等级 题目描述 在小朱朱的游戏世界里,有n个AI机器人. 他们相互之间可以进行PK,胜方存活且升一级,负方直接淘汰. 高等级AI必定战胜低等级AI,同等级AI的PK结果必定一胜一负,且规 ...

  9. Ubuntu WiFi连接问题

    1,先说明下, 这种方式仅针对 RTL8723BE这款无限网卡. 先用 lspci|grep -i net 先用这个命令查询网卡型号, 我的电脑查询结果: 00:19.0 Ethernet contr ...

  10. Pikachu-File Inclusion(文件包含漏洞)

    File Inclusion(文件包含漏洞)概述 文件包含,是一个功能.在各种开发语言中都提供了内置的文件包含函数,其可以使开发人员在一个代码文件中直接包含(引入)另外一个代码文件. 比如 在PHP中 ...