CODEWITHSUNDEEP
androidcordova
dSquared
dSquared

Reputation: 9825

iFrame Changes window.innerHeight / window.innerWidth on Android + PhoneGap

I'm creating an App using PhoneGap for Android. One of the pages in the App contains an iFrame (with local content) that is larger than the rest of the pages (this is a single-page App).

The problem I've run into is that once the iFrame page is viewed, the window.innerHeight and window.innerWidth JavaScript objects change their values to match the iFrame's width/height which is causing the rest of the 'pages' to display incorrectly as they are not the same size.

This persists even after I remove the iFrame from the DOM.

Has anyone run into this or has an idea of a workaround?

Upvotes: 0

Views: 1725

Answers (2)

octavio
octavio

Reputation: 11

I just was in the same situation and also I removed the iframe, the solution (that worked for me) is to put the next in your html head:

<meta name="viewport" content="width=device-width, initial-scale=1">

I always though that this part was unnecessary because the innerWidth and innerHeight don't complicate on the desktop, but it cost me 6 hours.

I would like to know if it worked for you, bye.

Upvotes: 1

codam
codam

Reputation: 16

First, for sure there is a bug here !

I just had the same issue and resolved, here is how. I changed all the iframes & images width to 100% or less for those wider than window.innerWidth.

Here is the corresponding HaxeJS code:

    resizeNodeChildrenTag(_contentContainer,"iframe");
    resizeNodeChildrenTag(_contentContainer,"img");


private function resizeNodeChildrenTag(node:HtmlDom, tagName:String):Void
{
    var tagNodes:HtmlCollection<HtmlDom> = node.getElementsByTagName(tagName);
    // for all nodes with the given tag name
    for (i in 0...tagNodes.length)
    {
        if(tagNodes[i].clientWidth > Lib.window.innerWidth)
            tagNodes[i].setAttribute("width", "96%");
            tagNodes[i].setAttribute("height", "");
        }
    }
}

Upvotes: 0

Related Questions