html - 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

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.