How do I embed iframe in PhoneGap app?

Question

There is a responsive scheduling website that renders a mobile view when on a phone. I want show this webpage within my PhoneGap div that way i can keep my header and navigation. Regular iframe code seems not to work for me. Can someone give me a hint on how to get this working like in the screenshot below.

Here is what i currently have:

    <div id="set" title="Set Appointment" class="panel">
            <iframe width="320px" height="480px" src="http://google.com"></iframe>
    </div>  

Answer 1

Well you can check this another question since you can come across some problems when using iframes on mobiles devices web views, if you want those two div being all the time on botton and top, you only need css to do so:

.topheader {
   position:fixed;
   bottom:0;
}

and so on.. i hope it does help you, of course you need to make the div positions rights

Answer 2

I had the same problem and i had done it with my my own solution i have used smartzoom. Iframe cannot be given 100% width and height you have to give in pixel so i used smartzoom it will automatically fit iframe to container height and width. You can adjust the code according to your need, heres the jsfiddle

<div id="viewsites" class="viewsites">
    <iframe scrolling="no" id="viewsite_iframe" sandbox="allow-scripts allow-popups allow-forms" src="" class="clsIframe"></iframe>
</div>

Answer 3

This works:

<iframe src="http://www.myschedulingwebsite.com/" style="width:100%; height:100%;">

Setting the height and width to 100% fills the containing div.

NOTE: If you attempt to embed an iframe using a website that can only be displayed in a frame on the same origin as the page itself, the web inspector will throw the error below:

Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

With that said, www.google.com and several other site's embedded iframes will always be blank. I hope this helps someone.

Answer 4

<iframe src="mypage.html" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
    Your browser doesn't support iframes
</iframe>