iframe父页面和子页面高度自适应
父页HTML:
<iframe id="mainframe" name="mainframe" style="width:100%;" marginheight="0" marginwidth="0" onLoad="iFrameHeight()" scrolling="auto" frameborder="0" src="Index.aspx"></iframe>
父页JS:
<script src="../Scripts/js/jquery-2.1.1.min.js"></script>
<script>
function iFrameHeight() {
var ifm = document.getElementById("mainframe");
var subWeb = document.frames ? document.frames["mainframe"].document : ifm.contentDocument;
if (ifm != null && subWeb != null) {
ifm.height = document.body.offsetHeight;
ifm.width = subWeb.body.scrollWidth;
}
}
</script>
子页JS
<script src="../Scripts/js/jquery-2.1.1.min.js"></script>
<script>
$(window.parent.document).find("#mainframe").load(function () {
var ifm = window.parent.document.getElementById("mainframe");
var subWeb = window.parent.document.frames ? window.parent.document.frames["mainframe"].document : ifm.contentDocument;
if (ifm != null && subWeb != null) {
ifm.height = subWeb.body.offsetHeight + 20; //预留出灵活高度20px
ifm.width = subWeb.body.scrollWidth;
}
});
</script>
iframe父页面和子页面高度自适应的更多相关文章
- 父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;
父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;
- Iframe父页面与子页面之间的调用
原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下: Iframe:iframe元素是文档中的文档. window对象: 浏览器会在其打 ...
- iframe父页面与子页面赋值
最近因为公司之前的系统用iframe,里面的高度不能自适应,导致了很多问题,今天特意拿来研究一下,从网上找了一些方法试验了一下,这里记录一下成功的方法 1.父页面获取子页面的高度,并给父页面赋值 父页 ...
- 使用iframe父页面调用子页面和子页面调用父页面的元素与方法
在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...
- JQuery操作iframe父页面与子页面的元素与方法
JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...
- IFrame父页面和子页面的交互
现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...
- Iframe父页面与子页面之间的相互调用
iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者i ...
- js里父页面与子页面的相互调用
一.在页面里用 open 打开的子页面: 1.子页面调用父页面的方法,包括子页面给父页面传值: window.opener.methodName(); window.opener.methodName ...
- JavaScript从父页面获取子页面的值(子页面又如何访问父页面)
之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...
- Jquery父页面和子页面的相互操作
//父页面调用子页面Add函数 $("iframe")[0].contentWindow.Add() //父页面对子页面Id为Sava的Dom元素执行一次单击操作 $(" ...
随机推荐
- swiper和tab相结合
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- svn登录问题
转载自: https://www.cnblogs.com/WQX-work24/p/9790260.html 版权归该作者所有.
- 帝国CMS模板中的多条件筛选方法
需求:点击某一条目,调出与该条目关键词相关的类似词条数据 要点: 1.帝国CMS灵动标签使用 [e:loop= 2.专题关键词筛选 enewszt 3.SQL语句筛选 select * fr ...
- jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作)
JQuery下锚点的平滑跳转 对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用. 例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下: $( ...
- FCKeditor用在JSP中的几点注意事项
转自:https://blog.csdn.net/asinzy/article/details/3854127 本篇文章主要介绍了"FCKeditor用在JSP中的几点注意事项", ...
- linux--mongodb安装与配置
linux下的mongodb的安装: 在mongodb的官网上下载:mongodb-linux-x86_64-rhel62-3.2.3.gz1.解压: tar -xvf mongodb-linux-x ...
- vue2.0 之 深入响应式原理
实例demo<div id="app"> <span>{{a}}</span> <input type="text" ...
- UML快速理解
在团队协作过程中最常见的就是开会.开会最常用的就是图,而图中最常见的就是流程图.时序图.类图,这三个图可以清楚的描述你想解释的内容.学好类图不仅仅能帮助自己更清楚的梳理业务,还能提高开会效率. 上图是 ...
- LeetCode--053--最大子序和(java)
给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,-5,4], 输出: 6 解释: 连续子数组 ...
- [转]php判断mysql_query是否成功执行
针对update 语句等会对数据表进行修改的语句 在mysql_query($sql);后面加上 $result = mysql_affected_rows(); 如果$result 值为-1表明语句 ...