您的位置：首页 > 编程技术 > js  >  javascript动态的改变IFrame的高度实现自动伸展

javascript动态的改变IFrame的高度实现自动伸展

 更新时间：2013年10月13日 07:27  点击：2845

动态的改变IFrame的高度，实现IFrame自动伸展，父页面也自动神缩
原理： 在IFrame子页面一加载的时候，调用父IFrame对象，改变其高度
具体实现一:
1、在IFrame的具体页面(就是子页面)，添加JavaScript

代码如下:


<script>
function IFrameResize(){
//alert(this.document.body.scrollHeight); //弹出当前页面的高度
var obj = parent.document.getElementById("childFrame"); //取得父页面IFrame对象
//alert(obj.height); //弹出父页面中IFrame中设置的高度
obj.height = this.document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度
}
</script>


2、在IFrame的具体页面(就是子页面)的body中，添加onload事件

代码如下:


<body onload="IFrameResize()">


3、为父页面的IFrame标签添加ID，即上面第一步，方法体中的第2行所写到的childFrame

代码如下:


<IFRAME border=0 marginWidth=0
frameSpacing=0 marginHeight=0
src="frame1.jsp" frameBorder=0
noResize scrolling="no" width=100% height=100% vspale="0" id="childFrame"></IFRAME>


具体实现二:

代码如下:


//动态改变父类iframe的高度
//iframe页面调用的js
$(function(){
//取到窗口的高度
var winH = $(window).height();
//取到页面的高度
var bodyH = $(document).height();
if(bodyH > winH){
window.parent.document.getElementById("mainFrame").height=bodyH;
}else{
window.parent.document.getElementById("mainFrame").height=winH;
}
});


父页面的iframe为

代码如下:


<iframe src="main.action" height="700" frameborder="0" width="100%" id="mainFrame" name="mainFrame"></iframe>

[!--infotagslink--]

相关文章

  • jQuery中iframe的操作(点击按钮新增窗口)

    <iframe>也应该是框架的一种形式，它与<frame>不同的是，iframe可以嵌在网页中的任意部分。本文给大家介绍jQuery中iframe的操作(点击按钮新增窗口)，需要的朋友参考下吧...2016-04-22

  • Vue 自适应高度表格的实现方法

    这篇文章主要介绍了Vue 自适应高度表格的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-14

  • javascript动态的改变IFrame的高度实现自动伸展

    动态的改变IFrame的高度，实现IFrame自动伸展，父页面也自动神缩 原理： 在IFrame子页面一加载的时候，调用父IFrame对象，改变其高度 具体实现一: 1、在IFrame的具体页面(就是子页面)，添加JavaScript...2013-10-13

  • 在vue中实现嵌套页面(iframe)

    这篇文章主要介绍了在vue中实现嵌套页面(iframe)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-31

  • JavaScript实现iframe自动高度调整和不同主域名跨域

    这篇文章主要介绍了JavaScript实现iframe自动高度调整和不同主域名跨域,作者通过建立一个代理来同步高度调整,需要的朋友可以参考下...2016-03-01

  • jQuery取得iframe中元素的常用方法详解

    这篇文章主要介绍了jQuery取得iframe中元素的常用方法,结合实例形式详细分析了jQuery针对iframe中元素获取技巧及注意事项,需要的朋友可以参考下...2016-01-15

  • JavaScript中关于iframe滚动条的去除和保留

    在开发中经常遇到去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条，大家基于js是怎么实现的呢？下面小编通过本文给大家详细介绍下，对js iframe滚动条相关知识感兴趣的朋友一起学习吧...2016-11-22

  • 微信jssdk在iframe页面失效问题的解决措施

    这篇文章主要介绍了微信jssdk在iframe页面失效问题的解决措施 的相关资料,需要的朋友可以参考下...2016-03-07

  • 解决Echarts 显示隐藏后宽度高度变小的问题

    这篇文章主要介绍了解决Echarts 显示隐藏后宽度高度变小的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-19

  • php中IE7 iframe session丢失问题解决方案

    本文章来给在家介绍在php中IE7 iframe session丢失问题解决方案，有碰到此类问题的同学可进入参考参考 假设采用iframe方式，很可能会遇到这样的问题。而且这个问题只...2016-11-25

  • js获取Html元素的实际宽度高度的方法

    下面小编就为大家带来一篇js获取Html元素的实际宽度高度的方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-05-20

  • jQuery javascript获得网页的高度与宽度的实现代码

    下面小编就为大家带来一篇jQuery javascript获得网页的高度与宽度的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考...2016-04-27

  • 总结几种解决子级div应float浮动让父级div高度不能自适应的办法【菜鸟收藏】

    现在是我还在菜鸟时遇到的子DIV css float浮动引起的父级div不能自适应高度时，收藏的几个解决办法，希望对新手有所帮助。 解决子级对象使用css float浮动 而父级div...2016-09-14

  • PHP关于IE下的iframe跨域导致session丢失问题解决方法

    今天搞的一个登录页面，被别的网站用iframe嵌进去后，死活无法登录（只在IE中存在这种情况）。 很明显，session无法被保存。但是直接在地址栏打开那个登录页面，一切都正常啊。真是奇怪啊。 在网上搜索了一下。发现这个问题...2013-10-13

  • python自动化测试selenium定位frame及iframe示例

    这篇文章主要为大家介绍了python自动化测试selenium定位frame及iframe示例的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助...2021-11-13

  • 开发一个封装iframe的vue组件

    这篇文章主要介绍了开发一个封装iframe的vue组件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下...2021-03-26

  • PNG图像元数据中iFrame注入攻击及防护【多图】

    本文我们来讲讲另外一种网站注入攻击方式，PNG图像元数据中iFrame注入攻击，这个也是本人最近接触，以前没有注意过，或许也有很多站长不清楚，现在分享出来。 我们一直在努...2016-11-25

  • js父页面中使用子页面的方法

    这篇文章主要向大家介绍了js父页面中使用子页面的方法，即js父页面使用iframe中的函数，感兴趣的朋友可以参考一下...2016-01-12

  • 解决同一页面中两个iframe互相调用jquery,js函数的方法

    本文主要介绍了解决同一页面中两个iframe互相调用jquery,js函数的方法，具有很好的参考价值，需要的朋友可以看下...2017-01-09

  • 网站被挂iframe木马的解决方案

    相信大多数站长都曾经遭遇过iframe木马的侵害，有朋友的网站被注入了N回iframe，心情可想而知。而且现在ARP攻击，注入iframe也是轻而易举的事，仅局域网里都时刻面临威胁，今天...2017-07-06