CODEWITHSUNDEEP
iframe-resizer
Masihur Rahman
Masihur Rahman

Reputation: 9

iframe-resizer could not work properly on mobile device

Im using the following lib https://iframe-resizer.com/ which enables cross site iFrame's to be resized after source page.

Although I encountered the following problem on the mobile device Im not able to solve:

When first loading the page the height of the iFrame is right (the whole loaded page is seen in the iframe). But when pressing a link which height is less then previous page then "resizedCallback" function could not called. So the current page height remain same as previous page. While the height of the current page is too small from previous page. This arises only on mobile.

Upvotes: 0

Views: 620

Answers (1)

Vikram Bishnoi
Vikram Bishnoi

Reputation: 11

This can be resolved by calling the parent resize method from second page.

For example your iFrame is like :

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

And resize methods are : 

<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"; }

Now on second page just add the following script:

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

This script will adjust the size automatically.

Upvotes: 1

Related Questions