0

0

如何跨域获取 iframe 加载的网页高度?

霞舞

霞舞

发布时间:2024-11-09 18:06:27

|

516人浏览过

|

来源于php中文网

原创

如何跨域获取 iframe 加载的网页高度?

获取指定 url 网页高度

您想要设置 iframe 的高度为显示网页地址的高度,但由于跨域限制,父页面无法直接操作加载的子页面窗口对象。

解决方法

如果您对要加载的子页面拥有控制权,可以使用 postmessage api 传递消息。此 api 需要在父页面和子页面中添加消息传递代码。通过这种方法,您可以将子页面窗口高度的消息发送到父页面,并根据该消息调整 iframe 高度。

代码示例

RoomGPT
RoomGPT

使用AI为每个人创造梦想的房间

下载

在子页面中:

window.addeventlistener("message", (event) => {
  if (event.data === "getheight") {
    event.source.postmessage(document.documentelement.scrollheight, event.origin);
  }
});

在父页面中:

let iframe = document.getElementById("c_iframe");
iframe.onload = () => {
  iframe.contentWindow.postMessage("getHeight", "*");
  iframe.contentWindow.addEventListener("message", (event) => {
    if (event.data) {
      iframe.height = event.data + "px";
    }
  });
};

请注意,该方法仅适用于您拥有控制权的 iframe 加载的子页面。如果您无法干预子页面,则无法获取其高度。

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
iframe写法有哪些
iframe写法有哪些

iframe写法有基本Iframe写法、嵌套Iframe写法、自适应宽高的Iframe写法、带有样式和属性的Iframe写法、内联Iframe写法和使用JavaScript动态创建Iframe写法。种写法都有自己的特点和适用场景。根据实际需求,选择合适的写法可以实现所需的功能和效果。

476

2023.10.19

虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程,阅读下面的文章了解更多详细操作。

26

2025.12.25

错误代码dns_probe_possible
错误代码dns_probe_possible

本专题整合了电脑无法打开网页显示错误代码dns_probe_possible解决方法,阅读专题下面的文章了解更多处理方案。

19

2025.12.25

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

31

2025.12.25

word转换成ppt教程大全
word转换成ppt教程大全

本专题整合了word转换成ppt教程,阅读专题下面的文章了解更多详细操作。

2

2025.12.25

msvcp140.dll丢失相关教程
msvcp140.dll丢失相关教程

本专题整合了msvcp140.dll丢失相关解决方法,阅读专题下面的文章了解更多详细操作。

2

2025.12.25

笔记本电脑卡反应很慢处理方法汇总
笔记本电脑卡反应很慢处理方法汇总

本专题整合了笔记本电脑卡反应慢解决方法,阅读专题下面的文章了解更多详细内容。

5

2025.12.25

微信调黑色模式教程
微信调黑色模式教程

本专题整合了微信调黑色模式教程,阅读下面的文章了解更多详细内容。

3

2025.12.25

ps入门教程
ps入门教程

本专题整合了ps相关教程,阅读下面的文章了解更多详细内容。

4

2025.12.25

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号