iframe宽高自适应

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>

  

原文地址:https://www.cnblogs.com/zhoushiya/p/12107298.html

时间: 2024-08-29 04:30:40

iframe宽高自适应的相关文章

js实现 iframe 宽高自适应

css <style type="text/css" media="screen"> .box{ width: 80%; height: 500px; margin: 0 auto; } .left{ width: 20%; height: 500px; float: left; border: 1px solid red; } #right{ width: 79%; height: 500px; border: 1px solid red; float

实现宽高自适应

1 <!DOCTYPE html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 4 <title>test</title> 5 <link rel="stylesheet" type="text/css" href="bootstrap.m

网页宽高自适应大小

如今,显示器的分辨率越来越多,终端也变得多样化,web开发页面的自适应问题越来越多,如果不做处理,一旦显示器的分辨率发生变化,展示的内容可能出现许多意料之外的排版问题.关于不同终端的展示问题可以通过响应式布局来实现,而不需要响应式布局时我们需要自己来避免上述问题. 宽度自适应: 1.设置最外层容器(如 DIV)的 width 为 100%: 2.如果网站头部有图片展示,那就不能简单设置宽度为 100%,会出现 repeat 的情况,或者图片大小超出最外层容器宽度,此时可以设置最外层容器宽度为固定

宽高自适应,高度塌陷,伪对象选择符

宽高自适应 网页布局中经常要定义元素的宽和高.但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是pc自适应. 自适应的优点: 元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备.不同窗口和不同分辨率下显示. 宽度自适应 元素宽度设置为100%.(块元素宽度默认为100%) 或者不设置宽度(width);(宽度是父元素的宽度) 高度自适应 1)自适应元素高度:height:auto;或者不设置;(是子元素撑开父元素的高度) 2)元素高度自适应窗口高度 设置方法

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

在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法 上代码 下面的是 结构代码 <div class="wrap">//此处为父组件 我们会设置父级的宽高并让其居中 <div class="center">//子组件我们要实现它的垂直居中 不设置他的宽高 宽高 都由下面的img引入的图片撑开 <img width="100px" src

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

一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法:height:auto;(等同于不给元素设置高度) 三.最小高度,最大高度,最小宽度,最大宽度 1.最小高度 语法: min-height:数值+单位; 注:IE6不识别min-height属性,解决方案如下: 方案一: min-height:100px; _height:100px; 方案二: m

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

图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性.  下面咱们在网上找两张宽高不一样的照片:     No.1                                              No.2        从上图看一个宽的一个宅的,很难做到自适应,无奈可恶的产品经理,只能自己想办法了  请看下面图片,经在各大浏览器和手机端测试,是好用的                                 咱们先来个对比: 好用                   

宽高自适应问题

网页布局中经常要定义元素的宽和高.但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应. 元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备.不同窗口和不同分辨率下显示. (1)宽度自适应 元素宽度设置为100%.(块元素宽度默认为100%) (2) 高度自适应 元素{height:auto;}/高度不写 (3)元素具备最小高度的自适应 min-height属性:最小高度:(IE6浏览器不识别该属性) -----.过滤器(filter) 1)下划线属性过

iframe宽高百分百显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-