开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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，确保只接收来自可信源的消息。

通过以上方法，可以有效解决父页面获取子页面高度的问题，并根据具体情况选择合适的解决方案。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

vue父页面给iframe子页面传值

在vue父页面有两个个参数名称和图标，需要把这两个参数传到iframe的地图里面，在地图触发绘点事件的时候，获取到传来的参数并且展示 vue:传值给子页面iframe // 传值给子页面iframe...this.name, }; iframeWindow.postMessage(data, '*'); }, iframe接收父页面的值...-- iframe.html --> // 监听来自vue父页面的消息 window.addEventListener('message', function(event) { const...，会将值传递给子页面的iframe元素。...子页面通过监听message事件获取传递的值，并进行相应的处理。这种方法需要父页面和子页面在同一个域名下，否则会因为浏览器的同源策略而导致通信失败。

1.5K2 0

js通过contentWindow控制iframe子页面元素点击事件,并把值传给父页面

本来需要点击一个图片后,显示一个iframe上传框.点击上传,从而操作子页面中的点击上传动作,再把值传给父页面.或控制父页面中iframe元素的显示状态.不过.通过upload()函数,可以不用显示上传框了...,直接激活子页面中的上传动作.另外,onchange事件则可以自动提交上传,不必用户点击上传按钮了.三步并做一步父页面中的上传按钮 --> 下面是父页面中的一个函数

8.5K3 0

微信小程序获取页面高度

watchHeight() { var query = wx.createSelectorQuery() //.box为指定类名高度 query.select('.box')

3.6K1 0

vue.js数据渲染完成后，获取页面高度问题

遇到的问题通过接口请求出来的数据，渲染到页面上，再获取元素内容高度的时候，高度为0 为什么高度会是0 因为我是在接口返回数据后，就直接在回调函数里获取了元素内容的高度。...虽然数据获取到了，但是页面还没有及时的渲染出来，所以获取的内容高度就为0了然后我就延迟2秒获取内容高度，发现内容高度是渲染完成后的正常高度，但是这样肯定是不行的。...部分代码示例一： mounted() { this.getDataList(); //调用方法 }, methods: { //获取数据列表 getDataList() {...1&keywords=') .then(function (res) { that.dataList = res.data.data; //将获取到的数据赋值给...(() => { console.log(content.offsetHeight); // 600 }) } }, methods: { //获取数据列表

6.1K3 0

WordPress 技巧：显示同个父页面的其他子页面的链接

假设有一个父页面，然后它有一些子页面。当打开父页面的时候，你想在 sidebar 显示它的子页面的链接。当打开子页面链接的时候，你还是想要显示它同个父级下的所有一组链接。...现在问题是，首先要判断现在的页面时是相同父页面的其他子页面。我们无法通过一个简单 WordPress 函数就能解决这个问题。 <?

6772 0

页面的高度设置_word页面高度在哪设置

问题1：页面加上doctype后height=100%不好使解决：增加css设置：html {height: 100%} body {height: 100%}；另外，其他的容器也需要设置height...:100%才能达到预期的目的问题2： ie6下table在table-layout: fixed下，行高不能自动充满解决：将需要自动充满的行高的高度设置为100%，即height=100% 问题3：...设置doctype后table内部的div高度100%不好使解决：在这种模式下，需要用具体的高度值进行设置，目前未找到其他方法发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn

2.4K2 0

iframe 父页面与子页面之间的方法的相互调用

language="javascript" type="text/javascript"> function parenttest() { alert("这是父页面的方法... 子页面的方法" onclick="btnClick()"/> function childtest() { alert("这是子页面的方法... 父页面的方法" onclick="btnClick()"/>

3K1 0

vue子组件向父组件传值的三种方式_vue父页面传值到子页面

1.用于子组件触发事件传递给父组件子组件： rowEvent 里面也可以带参数事件 treeData 是携带的参数 rowEvent(){ this....$emit(‘rowEvent’,’treeData’’); }, 父组件: 在父组件绑定自定义事件直接可以获取到 rowEvents(obj) { console.log...（obj） }, 2.用ref（常用于不触发的事件）子组件定义个变量（方法也行）父组件 use-table是子组件的里面绑定上ref 下面用 this....$refs.useTable.tableSelectArr 就可以直接获取到作者持续更新中（刚入前端的小白）版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。

2.4K3 0

js获取页面宽高

window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度...屏幕可用工作区宽度：window.screen.availWidth 相对于窗口左上角的X：window.event.clientX 相对于窗口左上角的Y：window.event.clientY 相对于整个页面的...X：window.event.X 相对于整个页面的Y：window.event.Y

7.7K4 0

vue子组件调用父组件父页面的方法「建议收藏」

如图：选择城市后，页面重新请求数据！（城市选择是子组件）选择完后不刷新页面，重新调用接口渲染主页面！第一种方法是直接在子组件中通过this....$parent.event来调用父组件的方法父组件 import...$parent.fatherMethod(); } } }; 第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。...$emit('fatherMethod'); } } }; 第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法父组件 <...(this.fatherMethod) { this.fatherMethod(); } } } }; 三种都可以实现子组件调用父组件的方法

5.1K3 0

自适应页面高度

因为即使是同一分辨率，页面中的实际高度也不同。不过非常遗憾，网上的文章可谓无数，但基本都不能解决问题。...2、基本讲的都是用CSS来自适应页面高度，这里不是这个问题。 ...document.getElementById("I1").contentWindow.document.body.scrollHeight } 参考：控制IFrame大小，不显示滚动条的方法使用JS...（parent……），对于一些将主页面和嵌入式页面放在不同主机的用户来说，就不能使用了，因为这是一个跨域访问方法二是一种不错的办法，但由于不需要和主页面通信，当主页面显示速度很快时，嵌入式页面的...JS代码可能不起作用。

2.7K7 0

iframe关闭父页面(iframe嵌套https页面)

iframe是html标签，具有一般标签的属性： width iframe的高度 height iframe的宽度 src iframe里面加载的页面url name 可以通过window.frames...在主页面中通过iframe标签可以引入其他子页面 <!...contentWindow、contentDocument frame.contentWindow 获取子页面的window对象 frame.contentDocument 获取子页面的document...对象 2、获取父页面子页面可以访问、修改同一个域名的父页面的方法和属性 window.parent/parent 获取当前页面的父页面-iframe所在的页面 parent.window 获取父页面的...window属性 parent.document 获取父页面的document属性 window.top 获取打开该页面的父页面，如果当前页面没有被嵌套到iframe中，window.topwindow

6.9K1 0

js|jq获取兄弟节点,父节点,子节点

08.19自我总结 js|jq获取兄弟节点,父节点,子节点一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes;...// 全部子节点 var first = test.firstChild; // 第一个子节点 var last = test.lastChile; // 最后一个子节点　 var previous =...var first = test.firstElementChild; // 第一个子节点元素 var last = test.lastElementChile; // 最后一个子节点　元素 var...previous = test.previousElementSibling; // 上一个兄弟节点元素 var next = test.nextElementSibling; // 下一个兄弟节点元素注意操作父来控制子必须给子元素赋予一个变量...二.jq $("#test1").parent(); // 父节点 $("#test1").parents(); // 全部父节点 $("#test1").parents(".mui-content"

15.1K1 0

解决浏览器差异导致从子页面回到父页面，父页面不刷新的问题

我的问题也是如此，我的需求是从父页面跳转子页面，子页面提交后返回父页面，并且父页面刷新。 ...Android的Chrome浏览器对这个需求就很容易支持，因为他每次页面重新显示的时候，都会刷新整个页面。而IOS的Safari浏览器出现了问题，Safari浏览器会读取缓存，不会重新刷新页面。...总体思路是在子页面返回时，告知父页面刷新。并且只在IOS上执行这个操作，否则Android会刷新两遍。 ...由于笔者对JS并不算精通，最初是想参考Android原生的回调操作，利用js实现页面回调，最后没能实现。然后考虑利用浏览器的生命周期，在H5中应该叫做事件，来处理。 ...它是在页面显示的时候响应，同时支持Chrome和Safari。

2.6K2 0

Js获取当前页面url参数

<script type="text/javascript"> function getUrlParams(url) { ...

22K4 0

js获取本页面元素并下载

本文由腾讯云+社区自动同步，原文地址 https://stackoverflow.club/article/using_js_download_html_element/ 目的：本页面已经有文件、图片...、表格、文本，用js生成一个压缩包并弹出下载框。...步骤一：获取image image的显示用的是类型，所以很方便获取base64字串。...步骤二：获取表格表格数据下载打算采用csv格式，比较简单不容易出错。...需要两个npm 包， "file-saver": "^2.0.2", "jszip": "^3.2.1", 参考: cnblog 下载文件 github 下载zip 脚本之家下载zip github js

7.3K2 0

jquery刷新当前页面、刷新父级页面

jquery刷新当前页面、刷新父级页面 window.location.reload(); // 刷新当前页面 parent.location.reload(); // 刷新父级页面 opener.location.reload...(); // 刷新父窗口页面（用于单开窗口） top.location.reload(); // 刷新最顶端页面（用于多开窗口）补充常用的知识 window.open(); // 打开窗口 window.close...url可打印当前url console.log(window.location.href) // 打印当前url window.open("http://xx.com", "_blank"); // 从新页面打开

3641 0

Confluence 7 删除页面和子页面

在一些 Confluence 的页面中，一般来说，你可以选定一个页面中，然后选择页面上面的删除。如果你的页面中还有子页面的话，Confluence 会提示你是否删除子页面。...可以在这里选择后删除子页面。需要注意的是，如果你不选择这个选项，那么 Confluence 将不会删除这个页面下面的所有子页面。那么这样操作会产生什么问题呢？...可能的问题如果不选择删除子页面，Confluence 将会只删除当前页面，所有的子页面将会被提升到对上面一级目录中。并且所有子页面的顺序和层级结构都会被打乱。...如果你还需要按照层级结构来的话，那么你需要重新调整，如果页面不多还好。如果页面比较多的话，这个工作量非常大。建议在删除之前，先调整好页面顺序和层级结构，然后再删除，以避免这个问题。

1.4K0 0

javascript 获取多种主流浏览器显示页面高度(转)

==> 页面对象宽度（即BODY对象宽度加上Margin宽） document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）...（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） Opera为： document.documentElement.clientWidth...==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）... offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置... offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标

9832 0

php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码

摘要腾兴网为您分享:PHP页面跳转 Js页面跳转代码，自动刷宝，中信金通，携程抢票，未来屋等软件知识，以及沃金汇，沃行讯通，securecrt.exe，我的世界变形金刚mod，一票通，农场小分队，手电筒...bar<99){ setTimeout(“count()”,100); }else{ window.location = “http://www.jbxue.com/”; } } 第二部分: 页面跳转...复制代码代码示例: 第三部分: 动态页面跳转方法一: PHP 跳转复制代码代码示例: header(“location: http://www.jbxue.com”); ?

30.2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭