CODEWITHSUNDEEP
htmliframecordova
KlassAktKreations
KlassAktKreations

Reputation: 363

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>

enter image description here

Upvotes: 9

Views: 37715

Answers (4)

Mahdi Esmaeili
Mahdi Esmaeili

Reputation: 575

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

Upvotes: 3

skhurams
skhurams

Reputation: 2145

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>

Upvotes: 0

KlassAktKreations
KlassAktKreations

Reputation: 363

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.

Upvotes: 17

Jorge Y. C. Rodriguez
Jorge Y. C. Rodriguez

Reputation: 3449

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

Upvotes: 0

Related Questions