Question

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

我的示例中的iFrame内容运行正常，它是一个非常长的单页表单，正在从另一个网站作为iFrame源加载（我无法提供iFrame源，但我只能说源不是与加载iFrame的实际网站位于同一域。

我正试图弄清两件事：

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

和... 2.该代码在较旧的浏览器中的可靠性如何，还有其他替代方法吗？

下面的代码现在可以正常工作，无论它是什么源，它都能设法检测iFrame源的内容，并输出一个整数，然后将其转换为像素，然后通过我的网站设置iFrame的高度。 / p>

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)

上面的代码有效，我希望就这种语言在较旧的浏览器中的可靠性以及如何修改它的问题征求合作意见，

此外，我想知道是否有一种方法可以在代码不起作用的情况下为通用像素提供后备解决方案。

非常感谢：）

Answer 1

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

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

框架页面中的

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

此代码在较旧的浏览器中的可靠性如何

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

还有替代方法吗？

猜测。

我想知道是否有一种方法可以在代码不起作用的情况下提供仅通用像素数量的后备解决方案。

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

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

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

从网站JS

1 个答案: