iframe父页面获取子页面的高度

最新推荐文章于 2021-06-23 23:08:14 发布
最新推荐文章于 2021-06-23 23:08:14 发布
阅读量349 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/maxixi/p/5815962.html
本文分享了在项目中使用iframe时，解决子页面修改父页面高度难题的方法。通过使用jQuery，作者实现了动态调整父页面高度以适应子页面内容变化的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近做项目中用到了iframe,子页面更改父页面的高度，经过九九八十一难，找到了解决的办法。

$(window).load(function() {
  var h=$(document).height();
  var ifHeight = $(window.top.document).find(".XX").css({
  height:h
 });
});

window.top:是获取子页面所有body以上的元素。

window.parent()是获取子页面body的上一级父元素。

转载于:https://www.cnblogs.com/maxixi/p/5815962.html

anxuandao0076
关注
如何自适应获取iframe子页面内容的高度
zwldzj的博客
04-21 607
在子页面上写 onload 、onresize、onreadystatechange写上这几个以防出现图片加载缓慢，导致页面加载不完整 function getBodyH(){ var heightBody = $("#blog-full-width")[0].clientHeight; if (window.navigator.userAgent.indexOf("MSIE")>=1) { heightBody = $("#blog-full-width")[0].clientHeig
iframe高度随子页高度变化
05-15
iframe设置高度随子页高度的变化而变化 0分资源共享
iframe父页面获取子页面高度
Zeus的博客
05-29 3366
var self = this reinitIframe = function () { var hotel = $("#test") var height = hotel.contents().find(“body”).height() self.height = height console.log(height) } window.setInterval(“reinitIframe()”, ...
父窗体计算Iframe内部模块的高度，付给Iframe
weixin_34327761的博客
09-30 190
function setIframeHeight(id){ try{ var iframe = document.getElementById(id); if(iframe.attachEvent){ iframe.attachEvent("onload", function(...
获取iframe子页面内容高度给iframe动态设置高度
Y15005449875的博客
07-20 4101
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>客户...
父页面获取iframe子页面的高度
weixin_38169927的博客
09-16 1852
function setIframeHeight(id){ try{ var iframe = document.getElementById(id); if(iframe.attachEvent){ iframe.attachEvent("onload", function(){ iframe.height = iframe.contentWindow.document....
嵌入式iframe子页面与父页面js通信的方法
10-24
在网页开发中，有时我们需要在嵌入的iframe子页面与包含它的父页面之间进行JavaScript通信。这通常是出于功能集成或者数据交互的需求。本篇文章将详细阐述如何在同域和跨域的情况下实现这样的通信。 首先，我们来看...
iframe子页面操作父页面并实现屏蔽页面弹出层效果
09-28
showDiv函数负责显示这两个层，其中涉及到获取页面宽度和高度的逻辑，然后通过改变div元素的display属性来控制其显示。closeDiv函数则执行相反操作，隐藏这些层。 最后，子页面son.html中的某个操作需要调用父页面...
jQuery获取与设置iframe高度的方法
01-19
设置iframe的高度，iframe的高度由iframe中的页面高度决定。 1.首先获取到iframe中页面的高度： 复制代码 代码如下:var iframeHeight = $(“#UpdateUserItem”).contents().find(“body”).height(); 2.设置iframe的...
iframe自适应子页面内容高度
08-13
2. JavaScript处理：通过`contentWindow`和`contentWindow.document`获取子页面高度，或使用`postMessage`和`message`事件进行跨域通信。 3. 动态调整：在父页面中监听事件，接收到高度信息后更新`iframe`的高度。 ...
iframe根据页面内容自适应高度和宽度
09-03
`iframe-resizer`库提供了一种解决方案，它允许父页面和子页面之间进行通信，动态调整`iframe`的高度。使用方法如下： - 首先，将`iframe-resizer.js`引入父页面和`iframe`内的子页面。 - 在`iframe`的HTML中添加...
父页面iframe高度自动适应子页面iframe高度
leyao2008的博客
06-10 382
function initParentHeight() { var div = window.parent.document.getElementById('mainFrame'); div.style.height=window.document.body.scrollHeight||window.document.body.offsetHeight+5; } fun...
获取Iframe页面高度并赋值给Iframe以及获取iframe里的元素
weixin_33887443的博客
04-10 4044
最近接手了别人的项目，别人用到了iframe，自己在实战中总结了一些关于iframe的小问题。 获取Iframe页面高度并赋值给Iframe Html <iframe name="container_ifranme" id="iframeId" scrolling="no" frameborder="no" border="0" src="home.html" onLoad="i...
iframe 高度根据子页面来确定
Start2019
05-31 2630
因为我这是 宽度已知，整体居中的布局，滚动条加在 iframe 上会很奇怪，而且iframe的高度不确定，所以只能加给父级body上。 注意 iframe 标签中的 scrolling要为 “no” iframe 和 $.load() 的区别： 怎么让iframe的高度和宽度可以100%https://bbs.csdn.net/topics/390329086 iframe嵌套界面自适应，可高度自由收缩 ...
iframe父根据子页内容动态改变高度
wstm2016的博客
10-12 444
<iframe name="iframe_content" id="iframe_content" width="100%" scrolling="no" onload="this.height=contentWindow.document.documentElement.scrollHeight"></iframe> 其中： iframe适应主容器宽度：width=...
设置iframe中html的宽度和高度,js如何动态设置iframe高度宽度？
weixin_28894541的博客
06-23 1275
按钮在哪儿？按钮在iframe里面就用下面这段函数做click的回调计算高度function clickHanlder() {var doc = document,p = window.parent,iframes = p.frames,iframe,i = 0;while (iframe = iframes[i++]) {if (iframe.document == doc) {var ihei...
IFrame 子页面获取父页面高度宽度
zhengshundong的博客
03-14 4822
【注意】：下面是js代码                         这是在子页面中写的            alert(parent.document.getElementById("content").width); //获取宽度 可能获取的是100% alert(document.documentElement.scrollWidth); //获取宽度...
如何实现iframe高度自动适应子页面内容
例如，如果子页面高度总是不超过视口高度的50%，我们可以设置iframe的高度为`50vh`。 5. **利用CSS的transform属性** 在某些情况下，我们可以利用CSS的`transform`属性来实现视觉上的高度自适应。当子页面的高度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值