iFrame et le navigateur Safari Mobile (iPad/iPhone)

Ici est le problème, et j'ai BESOIN d'iframe page web. Cette iframe doit avoir une certaine taille à la fois la largeur/hauteur. Cela ne fonctionne PAS sous iOS, car jolie iOS décidé d'ignorer l'attribut hauteur de cadres et de force afficher tout (sauts!).

Comment allez-vous faire comme une normale de l'iframe?

InformationsquelleAutor user1470118 | 2013-10-29
  1. 8

    J'ai trouvé un moyen de faire cela que SI vous posséder ou avoir accès à la modification de l'encadré de la page.

    Si vous le contrôle de la page web en cours de iframed dans, d'une façon que j'ai trouvé qui fonctionne bien est d'entourer l'ensemble du contenu (et non PAS L'IFRAME) avec une div à l'INTÉRIEUR de la iframed page. Donc, juste après la balise, vous devez placer votre tag.

    Ensuite, test pour Safari mobile ET si c'est iframed. 

    browser_=/iPhone|iPad/i.test(navigator.userAgent);
isInIframe = (window.location != window.parent.location) ? true : false;

    Si elle répond à ce critère, puis définissez la div de la hauteur que vous avez placé dans l'encadré de la page à ce que l'iframe de la hauteur et de définir le débordement de la div pour auto. Cela permettra de créer l'illusion que c'est un iframe.

    Maintenant, le dernier mais non moins envelopper la balise iframe dans 

    <div style="-webkit-overflow-scrolling:touch; overflow: auto;">

    Si vous avez des éléments qui ont utilisé jQuery(window) ou quelque chose comme ça, veillez à mettre à utiliser les DIV à la place depuis la fenêtre(iframe) s'étend automatiquement, il n'est pas très utile parce que l'iframe ont déjà étendu.

    InformationsquelleAutor user1470118
  2. 1

    Après avoir lutté dur, j'ai enfin trouvé un moyen de faire de l'iframe de défilement dans ios.Faire comme suit:

    Il suffit de placer une iframe dans div (div comme des éléments qui agit en tant que conteneur)
    et appliquer des styles comme suit et cela fonctionne parfaitement.

    .iframe {
    overflow: scroll !important;
    width: 100%;
    height: 100%;
    border: none;
}

.div {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: none;
    background-color: #FFF;
}

    Que je suis en train de travailler dans GWT, pour GWT gens d'ici est la suggestion.
    En cas de GWT il suffit de placer une iframe dans ScrollPanel (div) et d'appliquer les styles comme ci-dessus.

    InformationsquelleAutor Manne Teja
  3. 0

    J'ai d'abord utilisé le code ci-dessous pour les Iframe , ce travail a pour tous les sites web et android mobileapp,ipad à l'exception de l'iphone. Alors que l'iphone cliquez sur le bouton pas de travail et css dérangé.

    HTML:

    <iframe class ="holds-the-iframe" src="http://stackoverflow.com"  style="width:100%; height:100%;" seamless="seamless" ></iframe>

    Ensuite, nous utilisons la hauteur en pixel qui est max où nous strat de 2000px et réduit encore le travail et définir width=100%. C'est un travail de tous les appareils.

    HTML:

    <iframe  src="http://stackoverflow.com" style="width:100%;height:1500px;"></iframe>

    InformationsquelleAutor Alaknanda GAWAD4E