Question

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

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

首次加载页面时，iFrame的高度正确（整个加载的页面在iframe中可见）。但是当按下一个高度小于前一页的链接然后＆＃34; resizedCallback＆＃34;功能无法调用。因此，当前页面高度与上一页保持相同。虽然当前页面的高度与上一页相比太小。这只出现在手机上。

Answer 1

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

例如，您的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);

此脚本将自动调整大小。

iframe-resizer无法在移动设备上正常运行

1 个答案: