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

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《如何跨域获取 iframe 加载的网页高度？》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

获取指定 url 网页高度

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

解决方法

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

代码示例

在子页面中：

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 加载的子页面。如果您无法干预子页面，则无法获取其高度。

理论要掌握，实操不能落！以上关于《如何跨域获取 iframe 加载的网页高度？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！