js父页面获取子页面高度
在Web开发中，父页面获取子页面（通常指iframe内的页面）的高度是一个常见的需求。以下是关于这个问题的基础概念、优势、类型、应用场景以及解决方案的详细解释：
基础概念
- 父页面：包含iframe的页面。
- 子页面：iframe中加载的页面。
- 跨域：如果父页面和子页面不在同一个域下，会受到同源策略的限制，导致无法直接访问彼此的DOM。
优势
- 动态调整iframe高度，以适应内容变化，提升用户体验。
- 减少不必要的滚动条，使界面更加整洁。
类型
- 同源情况：父页面和子页面在同一个域下。
- 跨域情况：父页面和子页面不在同一个域下。
应用场景
- 嵌入第三方内容，如地图、社交媒体插件等。
- 内部系统集成，动态展示不同模块的内容。
解决方案
同源情况
在同源情况下，可以直接通过JavaScript访问子页面的DOM来获取高度。
父页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parent Page</title>
<script>
function adjustIframeHeight() {
var iframe = document.getElementById('myIframe');
iframe.style.height = iframe.contentWindow.document.documentElement.scrollHeight + 'px';
}
</script>
</head>
<body>
<iframe id="myIframe" src="child.html" onload="adjustIframeHeight()"></iframe>
</body>
</html>子页面代码（child.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Child Page</title>
</head>
<body>
<div style="height: 500px;">
<!-- 子页面内容 -->
</div>
</body>
</html>跨域情况
在跨域情况下，由于同源策略的限制，不能直接访问子页面的DOM。可以通过postMessage API来实现跨域通信。
父页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parent Page</title>
<script>
window.addEventListener('message', function(event) {
var iframe = document.getElementById('myIframe');
if (event.origin !== 'http://example.com') { // 确保安全性
return;
}
iframe.style.height = event.data + 'px';
}, false);
</script>
</head>
<body>
<iframe id="myIframe" src="http://example.com/child.html"></iframe>
</body>
</html>子页面代码（child.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Child Page</title>
<script>
window.onload = function() {
var height = document.documentElement.scrollHeight;
parent.postMessage(height, 'http://parent.example.com'); // 发送高度给父页面
};
</script>
</head>
<body>
<div style="height: 500px;">
<!-- 子页面内容 -->
</div>
</body>
</html>常见问题及解决方法
- 高度获取不准确：可能是由于子页面内容动态加载或JavaScript执行顺序问题。可以在子页面内容完全加载后再发送高度。
- 跨域安全问题：在使用
postMessage时，务必验证event.origin，确保只接收来自可信源的消息。
通过以上方法，可以有效解决父页面获取子页面高度的问题，并根据具体情况选择合适的解决方案。
相关·内容
我的问题是，我想要这个页面-*在这个页面中使用动态高度的iframe。*/。问题是，当我尝试iframe-resizer时，什么也没有发生。我通过javascript包含了iframeResizer.contentWindow.min.js
document.getElementById("myxcomponent1").inn
浏览 1提问于2014-11-30得票数 0
当有人点击iframe (子页面)中的链接时，如何让父页面滚动到顶部？问题是子页面将保留在页面的相同位置，因为iframe的高度比父页面大得多。
请注意:父页面和子页面位于不同的子域中。
浏览 5提问于2010-06-18得票数 38
回答已采纳
我正在尝试使用JS显示一个隐藏的Div on click事件。此Div包含UL，有时UL的高度恰好大于父Div。在这种情况下，会出现父分区滚动。我想要的是在一个子Div中，在父Div的顶部显示这个列表。这样列表的高度不会影响页面的UI。注意:蓝色边框表示父Div &带有灰色背景的列表在子Div中。
浏览 3提问于2014-04-18得票数 0
1回答
我正在尝试将另一个应用程序可视化到我的salesforce页面中。我正在寻找如何自动调整大小，但我没有找到任何有用的东西。
浏览 3提问于2012-12-12得票数 3
2回答
我设置了一个包含内容的容器和底部没有设置高度的子元素的基本HTML页面，如下所示： ^ | //other elements我想要做的是获取child相对于容器的当前位置(目前还没有设置的高度)，然后计算将子容器扩展到父容器底部所需的高度。
问题是如何获得相对于父级的top: of child的当前位置
浏览 2提问于2015-12-19得票数 1
回答已采纳
我控制着父页面和子页面，但是它们将被加载到不同的域(实际上，其中一个将是http和其他https)。在iframe中，我有一个函数，它将在文档加载时运行，然后定期获得文档的高度，并将其设置为URL片段的值(例如，类似于)
父页面将类似于，而iframe最初将是。
最初的iframe页面只
浏览 7提问于2011-04-18得票数 1
回答已采纳
我正在处理一个元素，当你滚动过去时，这个元素就会在页面顶部变得粘稠。为了防止它下面的内容向上移动，我正在获取即将变得粘稠的元素的父元素的当前高度，并将其作为纯用户体验的内联样式添加，这样用户就不会被跳来跳去的东西弄糊涂了。
我想知道这是否增加了性能的好处？仅仅是改变元素的位置这一事实是否会导致页面再流，还是在使子元素粘稠之前，通过将固定的高度应用于元素父元素来阻止页面再流？
浏览 1提问于2018-07-20得票数 2
回答已采纳
1回答
我要弄到iframe的高度。此外，我还需要得到一个调整大小的事件，以便当iframe加载的内容发生变化时，我可以动态地更改高度。到目前为止，我成功地获得了身高，但没有调整大小的事件。
浏览 4提问于2015-07-27得票数 0
回答已采纳
我已经阅读了大量的帖子和文章，但还没有找到专门针对我的问题的解决方案子页面是一个php调查，当用户点击下一步按钮时，它会改变页面的高度。(不是真正更改页面，而是在一个.php文件中重新填充内容)
我正在尝试让父页面自动扩展，并根据子页面的长度接触高度。
浏览 0提问于2012-02-12得票数 0
回答已采纳
框架级子页面从父页获取@Input数据。但是，该值不会在子页面中更新。游乐场
结构：目标是在输入父页面时重置first
浏览 0提问于2018-10-30得票数 0
回答已采纳
如何在到达可用空间的末尾时使用jquery动态地增加tinyMCE的高度？因为我不想滚动它来查看顶部的内容。
浏览 2提问于2014-05-08得票数 1
回答已采纳
我正在尝试创建一个包含一些孩子的div，它总是适合覆盖整个页面的父div。子div的宽度适合父div，但高度也应该适合父div。子div (里面有它的孩子)应该始终适合父div的高度和宽度。 </div><div class="parent">覆盖了整个页面。&
浏览 0提问于2021-11-19得票数 0
style="position:fixed;width:100px;height:100px; border:solid 1px;"></div>
基本上，我希望固定的子div留在父div中，因此父div应该在每次页面向下滚动时调整其高度(子div向下移动)。或者我应该在js中实现它？
浏览 2提问于2012-08-25得票数 0
回答已采纳
4回答
在页面内容中我有一些外部iframe，问题是我不想滚动到那个iframe上，但我不知道iframe会有多长？="100%" marginwidth="0"</iframe>
宽度没有问题，我的问题是高度，我想从我的iframe中删除scrool，但我不想让它的代码像height="100px"，有任何想法与jquery如何获
浏览 0提问于2014-06-19得票数 0
父元素是否可以从绝对定位的子元素继承高度？
我面临的问题是“子”元素并没有强迫“父”元素继承它的高度，从而导致页面布局问题。
浏览 0提问于2014-01-23得票数 1
回答已采纳
1回答
我意识到:当我向下滚动页面时，浏览器的导航条(即iPhone上的Safari，安卓设备上的Chrome )不像浏览普通网站时那样自动隐藏。
浏览 5提问于2015-06-09得票数 0
回答已采纳
1回答
由于许多不同的原因，我的网页由以下几部分组成:一个来自www.example.com的ruby页面，它从另一个服务器(subdomain.example.com)调用一个iFrame，在父服务器和子服务器中都有这个javascript指令: document.domain="example.com"；
父页面可以访问子页面中的元素，我需要它来使父页面改变高度，因为它是子页
浏览 1提问于2010-10-07得票数 0
我的页面上有一个容器，它有一个背景和最小的高度.在容器中，我有几个使用ng-if逻辑切换的“页面”div。这些页面是动态的，因此父容器的高度取决于这些子容器的高度。这些页面之间的切换就像我所期望的那样工作，并且容器的高度可以根据需要展开。但是，我需要在页面之间添加一个交叉淡出转换，这样它们就可以很好地相互淡出。但是，显然，这会从文档流中删除它们，并阻止父容器正确地获取</e
浏览 7提问于2015-02-28得票数 2
回答已采纳
6回答
在CSS中，当你将某个东西的宽度或高度设置为100%时，它实际上只是将其设置为浏览器窗口的100%。有没有办法让它100%覆盖整个页面？让我换个说法:我希望这个元素(一个div)占据整个页面，不管你滚动多少次。拥有100%大小和100%宽度的父元素是不起作用的，因为它们被以相同的方式对待。我开始想，我可能必须使用JS来获取页面的高度，然后完全定义它。
浏览 0提问于2009-12-21得票数 2
回答已采纳
我的父jsp包含两个div..<html><body><div id="child2"></div></html><body></b
浏览 2提问于2015-08-22得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
