web-dev-qa-db-fra.com

Comment puis-je intégrer l'iframe dans l'application PhoneGap?

Il existe un site Web de planification réactif qui rend une vue mobile lorsque vous êtes au téléphone. Je veux afficher cette page Web dans ma division PhoneGap de cette façon, je peux conserver mon en-tête et ma navigation. Le code iframe régulier ne semble pas fonctionner pour moi. Quelqu'un peut-il me donner un indice sur la façon de faire fonctionner cela comme dans la capture d'écran ci-dessous.

Voici ce que j'ai actuellement:

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

enter image description here

html5iframecordova
8
KlassAktKreations

Cela marche:

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

Régler la hauteur et la largeur à 100% remplit le div.

NOTE: Si vous essayez d'incorporer un iframe à l'aide d'un site Web pouvant uniquement être affiché dans un cadre de la même origine que la page, l'inspecteur Web lève l'erreur ci-dessous:

Refuse d'afficher ' https://www.google.com/ ' dans un cadre car il définissait 'X-Frame-Options' sur 'SAMEORIGIN'.

Cela dit, www.google.com et plusieurs iframes intégrés du site seront toujours vides. J'espère que ça aidera quelqu'un.

17
KlassAktKreations
<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
Mahdi Esmaeili

Eh bien, vous pouvez vérifier cette autre question puisque vous pouvez rencontrer des problèmes lors de l’utilisation d’iframes sur les vues Web des appareils mobiles, si vous voulez que ces deux div soient tout le temps à la fois en haut et en bas, vous n'avez besoin que de css alors:

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

et ainsi de suite .. j'espère que cela vous aide, bien sûr, vous devez rendre les droits des positions div

0
jycr753

J'ai eu le même problème et je l'avais fait avec ma propre solution J'ai utilisé smartzoom . Iframe ne peut pas être donné à 100% en largeur et hauteur, vous devez donner en pixel, donc j’ai utilisé smartzoom, il s’ajustera automatiquement à iframe à la hauteur et à la largeur du conteneur. Vous pouvez ajuster le code en fonction de vos besoins, voici le 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
skhurams