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>
iframe宽高自适应的更多相关文章
- 从零开始学习前端开发 — 7、CSS宽高自适应
一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...
- JQuery iframe宽高度自适应浏览器窗口大小的解决方法
iframe宽高度自适应浏览器窗口大小的解决方法 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...
- jquery操作html中图片宽高自适应
在网站制作中如果后台上传的图片不做宽高限制,在前台显示的时候,经常会出现图片变形,实用下面方法可以让图片根据宽高自适应,不论是长图片或者高图片都可以完美显示. $("#myTab0_Cont ...
- css 宽高自适应的div 元素 如何居中 垂直居中
在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法 上代码 下面的是 结构代码 <div class=" ...
- 翻屏类 h5 适配方案:解决宽高自适应难题
表格 图片等 宽度自适应 :width:100%; box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及 ...
- css+background实现 图片宽高自适应,拉伸裁剪不变形
图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性. 下面咱们在网上找两张宽高不一样的照片: No.1 ...
- HTML5 图片宽高自适应,居中裁剪不失真
一,使用 JS,先上效果图,右图为定死宽高的效果,左图为处理之后的 1, 主要思路是,在图片 onload 后,将图片的宽高比和 div 容器的宽高比进行比较, 2, 从而确定拉伸或者压缩之后是宽还是 ...
- 【CSS】三栏/两栏宽高自适应布局大全
页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...
- iframe宽高百分百显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- pandas模块的数据操作
数据操作 数据操作最重要的一步也是第一步就是收集数据,而收集数据的方式有很多种,第一种就是我们已经将数据下载到了本地,在本地通过文件进行访问,第二种就是需要到网站的API处获取数据或者网页上爬取数据, ...
- MVC开发之Razor的使用
一.运用布局和视图起始文件 布局的使用,可以简化视图,允许用户创建能够运用于多个视图的通用HTML,并使得维护更加容易.下面是一个简单的例子: 域模型类: public class Product { ...
- 2020.02.01【NOIP提高组】模拟B 组总结反思——数列(sequence) 树 【2012东莞市选】时间流逝 挖掘机技术哪家强
T1 数列(sequence) 比赛时 我自以为是地打了简简单单一个判断--- 之后 Waiting-- T2 2753. 树(tree) 比赛时 这题我居然比赛时也想了很久,可能是因为我太懒,我很早 ...
- laravel本地化扩展包的下载使用
1.下载扩展包 composer require caouecs/laravel-lang:~3.0 2.下载完成之后在根目录下的vendor中caouces\src下就是语言的扩展包 2.1我们复制 ...
- shell-快速抽样
有时我们需要对文件进行抽样,这时候只需要一个shell命令就可以抽取固定行数的样本:shuf shuf -n $m $file 参数有2: -n: 抽样行数 -r: 是否重复
- 假期学习【四】RDD编程实验一
1.今天把Spark编程第三个实验的Scala独立程序编程写完了.使用 sbt 打包 Scala 程序,然后提交到Spark运行. 2.完成了实验四的第一项 (1)该系总共有多少学生: map(t ...
- The file is absent or does not have execute permission This file is needed to run this program
tomcat下载后发现startup.sh文件启动不了 原因: 没有权限 解决方案:chmod 777 *.sh
- eclipse中配置maven环境
一.配置setting.xml文件 1.首先将下载好的maven打开,打开文件夹,首先就需要对maven安装目录下有个config文件夹,在文件夹下有settings.xml文件.settings里面 ...
- c#从前台界面找后台方法
比如你新接触一个项目 项目别人已经写的差不多了 你对项目一无所知,别人安排给你活 怎么最快速度找到你要干的活对应的东西 以谷歌浏览器为例 一个项目你要修改 库存信息列表 右键检查或者F12 找 ...
- 实用技巧之while里面使用getchar或sleep函数
我们经常需要打印一些变量的取值来调试程序,使用while(1)是常用的手段. ) { char letter = getchar(); printf("test_point is %d \t ...