Geek Answers Handbook

How to embed iframe in PhoneGap application?

There is a flexible scheduling website that displays a mobile view on the phone. I want to show this webpage in my PhoneGap div so that I can save the title and navigation. Regular iframe code doesn't seem to work for me. Can someone give me a hint on how to make this work, as in the screenshot below.

Here is what I have now:

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

enter image description here

+8
html5 cordova iframe
source share
4 answers

It 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 try to embed an iframe using a website that can only be displayed in a frame in the same source as the page itself, the web inspector will give an error below:

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

With that said, www.google.com and several other embedded site frames will always be empty. Hope this helps someone.

+16
source share
 <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
source share

Well, you can check this one more question , as you may encounter some problems when using iframes on web representations of mobile devices, if you want these two divs all the time on botton and top, you only need css for this:

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

etc. I hope this helps you, of course, you need to do the rights to the div positions.

0
source share

I had the same problem and I did it with my own solution. I used smartzoom . Iframe cannot be set to 100% of the width and height that you must give in pixels, so I used smartzoom, it will automatically put the iframe in the height and width of the container. You can adjust the code according to your needs, jsfiddle

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

More articles:


All Articles