从网站 JS 检测外部源 iFrame 内容的高度答案

【问题标题】：Detect height of external source iFrame content from website JS从网站 JS 检测外部源 iFrame 内容的高度
【发布时间】：2019-03-23 11:09:16
【问题描述】：

我继承了一些 JS，它从网站内的另一个网站检测 iFrame 的内容高度。 iFrame 不适用于从网站操作 iFrame 中的内容，这实际上是不可能的。

我的示例中的 iFrame 内容运行良好，它是一个非常长的单页表单，作为 iFrame 源从另一个网站加载（我无法提供 iFrame 源，但我可以说源不是在与加载 iFrame 的实际网站相同的域上）。

我想弄清楚两件事：

这如何能够读取 iFrame 源并获取高度。

并且... 2. 此代码在旧版浏览器中的可靠性如何？是否有替代方法？

下面的代码现在可以正常运行，它以某种方式设法检测 iFrame 源的内容，而不管它的源是什么，并输出一个整数，然后我将其转换为像素，然后通过我的网站设置 iFrame 的高度。

HTML

<div class="banner-page">
    <iframe id="iframe" class="position-relative" src="https://externalwebsite.com/application-form" width="100%" frameborder="0" scrolling="no"></iframe>
  </div>

JS（从源获取申请表的高度）

// Create IE + others compatible event handler
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"
    var eventer = window[eventMethod]
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"

    // Listen to message from child window
    eventer(messageEvent,function(e) {
        var str = e.data.toString()
      var pageHeight = e.data
      document.getElementById("iframe").style.height = pageHeight + 'px';
    }, false)

上面的代码有效，我希望就旧浏览器中的可靠性以及我可以如何修改它获得协作意见，

此外，我想知道如果代码不起作用，我是否可以提供一种仅针对通用像素数的后备解决方案。

非常感谢:)

【问题讨论】：

标签： javascript function iframe

【解决方案1】：

这如何能够读取 iFrame 源并获取高度。

不是。同源策略禁止读取不同源的框架内容的高度。

框架页面中的JavaScript负责确定页面的高度。然后它使用 postMessage 将该信息发送到父页面中的侦听器。

这段代码在旧版浏览器中的可靠性如何

Can I Use 列出了浏览器对相关功能的支持。

还有其他方法吗？

猜测。

我想知道如果代码不起作用，我是否可以提供一种仅针对通用像素数的后备解决方案。

只需在样式表中设置一个默认值即可。

如果消息监听器没有触发，更新高度的 JavaScript 将永远不会运行，因此它不会覆盖默认值。

如果它运行，则覆盖默认值。

【讨论】：