iframe-resizer - iframe-resizer 无法在移动设备上正常工作

Question

我使用以下库http://davidjbradshaw.github.io/iframe-resizer/可以在源页面之后调整跨站点 iFrame 的大小。

虽然我在移动设备上遇到了以下问题，但我无法解决：

首次加载页面时，iFrame 的高度是正确的（整个加载的页面都在 iframe 中看到）。但是，当按下高度小于上一页的链接时，无法调用“resizedCallback”函数。所以当前页面高度与上一页保持一致。而当前页面的高度与上一页相比太小了。这仅在移动设备上出现。

Answer 1

这可以通过从第二页调用父 resize 方法来解决。

例如，您的 iFrame 就像：

<iframe id="paymentForm" src="/payments/onlineDetailsForm" width="100%"
    height="400px" onload='resizeIframeWithoutScrolling(this);'></iframe>

调整大小的方法是：

<script type="text/javascript">

function resizeIframeWithoutScrolling() {
    document.getElementById("paymentForm").style.height = (parseInt(document
            .getElementById("paymentForm").contentWindow.document.body.scrollHeight) + 1)
            + "px";
}


function AdjustIframeHeight(i) { document.getElementById("paymentForm").style.height = parseInt(i) + "px"; }

现在在第二页只需添加以下脚本：

<script type="text/javascript">
parent.resizeIframeWithoutScrolling(document.getElementById("secondPageId").scrollHeight);

该脚本将自动调整大小。