如何跨域获取 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 加载的网页高度？的详细内容，更多请关注其它相关文章！