How do I embed iframe in PhoneGap app?

问题:

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>  

回答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.

回答2:

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

回答3:

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

回答4:

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>