iframe-resizer在移動設備上無法正常工作

Question

使用以下lib http://davidjbradshaw.github.io/iframe-resizer/即可使跨站點iFrame在源頁面之後調整大小。

雖然我遇到的移動設備我不是能解決以下問題：

當第一次加載頁面的iFrame的高度是正確的（全加載的頁面被認爲是在iframe）。但是當按下一個高度小於上一頁的鏈接時，不能調用「resizedCallback」函數。所以當前頁面高度與前一頁保持相同。雖然當前頁面的高度與上一頁相比太小了。這隻出現在手機上。

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); 

這個腳本會自動調整大小。