it-swarm.com.de

Wie bekomme ich ein IFrame, um auf iOS Safari reagieren zu können?

Das Problem ist, dass, wenn Sie IFrames verwenden müssen, um Inhalte in eine Website einzufügen, in der modernen Web-Welt erwartet wird, dass der IFrame ebenfalls anspricht. Theoretisch ist es einfach, verwenden Sie einfach <iframe width="100%"></iframe> oder setzen Sie die CSS-Breite auf iframe { width: 100%; }. In der Praxis ist dies jedoch nicht ganz so einfach, aber es kann auch so sein.

Wenn der Inhalt der iframe vollständig anspricht und sich ohne interne Bildlaufleisten selbst anpassen kann, ändert iOS Safari die iframe ohne wirkliche Probleme.

Wenn Sie den folgenden Code berücksichtigen:

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Iframe Isolation Test</title>

    <style type="text/css" rel="stylesheet">

        #Main {
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>Iframe Isolation Test 13.17</h1>
    <div id="Main">
        <iframe height="950" width="100%" src="Content.html"></iframe>
    </div>
</body>
</html>

Mit dem Content.html:

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Iframe Isolation Test - Content</title>

    <style type="text/css" rel="stylesheet">

        #Main {
            width: 100%;
            background: #ccc;
        }

    </style>
</head>
<body>
    <div id="Main">
        <div id="ScrolledArea">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada purus quis commodo convallis. Fusce consectetur mauris eget purus tristique blandit. Nam nec volutpat augue. Aliquam sit amet augue vitae orci fermentum tempor sit amet gravida augue. Pellentesque convallis velit eu malesuada malesuada. Aliquam erat volutpat. Nam sollicitudin nulla nec neque viverra, non suscipit purus tincidunt. Aenean blandit nisi felis, sit amet ornare mi vestibulum ac. Praesent ultrices varius arcu quis fringilla. In vitae dui consequat, rutrum sapien ut, aliquam metus. Proin sit amet porta velit, suscipit dignissim arcu. Cras bibendum tellus eu facilisis sodales. Vestibulum posuere, magna ut iaculis consequat, tortor erat vulputate diam, ut pharetra sapien massa ut magna. Donec massa purus, pharetra sed pellentesque nec, posuere ut velit. Nam venenatis feugiat odio quis tristique. 
        </div>      
    </div>
</body>
</html>

Dann funktioniert das ohne Probleme in iOS 7.1 Safari. Sie können ohne Probleme zwischen Querformat und Hochformat wechseln.

enter image description hereenter image description here

Ändern Sie jedoch einfach das CSS Content.html, indem Sie Folgendes hinzufügen:

    #ScrolledArea {
        width: 100%;
        overflow: scroll;
        white-space: nowrap;
        background: #ff0000;
    }

Du bekommst das:

enter image description hereenter image description here

Wie Sie sehen, ist der Inhalt von Content.html zwar vollständig ansprechend (div # ScrolledArea hat overflow: scroll eingestellt) und die iframe-Breite beträgt 100%, doch der iframe nimmt immer noch die volle Breite von div #ScrolledArea als ob der Überlauf nicht einmal existiert. Demo

Wurde in der iframecontent in solchen Fällen ein Bildlaufbereich ausgeführt, stellt sich die Frage, wie man die iframe-Komponente anspricht, wenn der Inhalt des Iframe einen horizontalen Bildlaufbereich hat. Das Problem liegt nicht in der Tatsache, dass die Content.html nicht anspricht, sondern in der Tatsache, dass die iOS-Safari einfach den iframe so ändert, dass der div#ScrolledArea vollständig sichtbar ist.

111
Idra

Die Lösung für dieses Problem ist eigentlich ganz einfach und es gibt zwei Wege, um dieses Problem zu lösen. Wenn Sie die Kontrolle über Content.html haben, ändern Sie einfach das CSS div#ScrolledArea width in:

        width: 1px;
        min-width: 100%;
        *width: 100%;

Grundsätzlich ist die Idee hier einfach: Sie setzen die Variable width auf etwas, das kleiner als der Viewport ist (in diesem Fall die Breite des Frames), und überschreiben Sie ihn mit min-width: 100%, um den tatsächlichen width: 100% zuzulassen, der standardmäßig von iOS Safari überschrieben wird. Da *width: 100%; vorhanden ist, bleibt der Code IE6-kompatibel. Wenn Sie sich jedoch nicht für IE6 interessieren, können Sie ihn weglassen. Demo

enter image description hereenter image description here

Wie Sie jetzt sehen können, ist die Breite von div#ScrolledArea tatsächlich 100% und der overflow: scroll; kann seine Aufgabe erfüllen und den überfließenden Inhalt ausblenden. Wenn Sie Zugriff auf den iframe-Inhalt haben, ist dies vorzuziehen. 

Wenn Sie jedoch keinen Zugriff auf den iframe-Inhalt haben (aus welchem ​​Grund auch immer), können Sie tatsächlich dieselbe Technik für den iframe selbst verwenden. Verwenden Sie einfach das gleiche CSS für den iframe:

    iframe {
        width: 1px;
        min-width: 100%;
        *width: 100%;
    }

Es gibt jedoch eine Einschränkung: Sie müssen die Bildlaufleisten mit scrolling="no" im iframe deaktivieren, damit dies funktioniert:

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

Wenn die Bildlaufleisten zulässig sind, funktioniert dies nicht mehr für den Iframe. Wenn Sie jedoch stattdessen Content.html ändern, können Sie den Bildlauf im iframe beibehalten. Demo

258
Idra

Das Problem scheint zu sein, dass Mobile Safari die Breite Ihres iFrame nicht einhalten wird, wenn das darin enthaltene Dokument breiter ist als das von Ihnen angegebene. Beispiel:

http://jsbin.com/hapituto/1

In einem Desktop-Browser sehen Sie einen iFrame und einen Div auf 300px. Der Inhalt ist breiter, sodass Sie den iFrame scrollen können.

Bei der mobilen Safari werden Sie jedoch feststellen, dass der iFrame automatisch auf die Breite des Inhalts erweitert wird. 

Meine Vermutung ist, dass dies eine Problemumgehung für seit langem bestehende Probleme beim Blättern von Inhalten auf einer Seite ist. Wenn Sie in der Vergangenheit einen großen Bildlauf-Iframe auf einem Berührungsgerät hatten, stecken Sie im I-Rahmen "fest", da das Bildlauf statt der Seite selbst wäre. Es scheint, dass Apple entschieden hat, dass das Standardverhalten eines iFrames "Kein Bildlauf" ist und erweitert wird, um dies zu verhindern. 

Eine Möglichkeit kann diese Problemumgehung sein. Anstelle der Annahme, dass der iFrame einen Bildlauf durchführen wird, platzieren Sie den iframe in einem DIV, das Sie steuern können, und lassen Sie den Bildlauf durchführen. 

beispiel: http://jsbin.com/zakedaja/1

Beispiel Markup:

<div style="overflow: scroll; -webkit-overflow-scrolling: touch; width: 300px;">
   <iframe src="http://jsbin.com/roredora/1/" style="width: 600px;"></iframe>
</div>

Auf der mobilen Safari können Sie jetzt den Inhalt des nun vollständig erweiterten iFrames über das div, das ihn enthält, scrollen.

Der Haken: Das sieht auf einem Desktop-Browser wirklich hässlich aus, da Sie jetzt über zwei Bildlaufleisten verfügen. Daher müssen Sie möglicherweise eine Browsererkennung mit JS durchführen, um dieses Problem zu umgehen. 

19
DA.

Ich brauchte eine Cross-Browser-Lösung. Anforderungen waren:

  • benötigt, um auf iOS und anderswo zu arbeiten
  • sie haben keinen Zugriff auf den Inhalt im iFrame
  • brauche es zum scrollen!

Aufbauend auf dem, was ich von @Idra bezüglich scrolling = "no" unter iOS und diesem Beitrag über das Anpassen von iFrame-Inhalten an den Bildschirm in iOS gelernt habe, habe ich hier das Ende gefunden. Hoffe es hilft jemandem =)

HTML

<div id="url-wrapper"></div>

CSS

html, body{
    height: 100%;
}

#url-wrapper{
    margin-top: 51px;
    height: 100%;
}

#url-wrapper iframe{
    height: 100%;
    width: 100%;
}

#url-wrapper.ios{
    overflow-y: auto;
    -webkit-overflow-scrolling:touch !important;
    height: 100%;
}

#url-wrapper.ios iframe{
    height: 100%;
    min-width: 100%;
    width: 100px;
    *width: 100%;
}

JS

function create_iframe(url){

    var wrapper = jQuery('#url-wrapper');

    if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){
        wrapper.addClass('ios');
        var scrolling = 'no';
    }else{
        var scrolling = 'yes';
    }

    jQuery('<iframe>', {
        src: url,
        id:  'url',
        frameborder: 0,
        scrolling: scrolling
    }).appendTo(wrapper);

}
13
ggwarpig

Das Problem bei all diesen Lösungen ist, dass sich die Höhe der iframe nie wirklich ändert.

Dies bedeutet, dass Sie keine Elemente in der iframe mit Javascript, position:fixed; oder position:absolute; zentrieren können, da die iframe selbst niemals scrollt.

Meine Lösung hier detailliert beschrieben besteht darin, den gesamten Inhalt des Iframes in eine div zu packen.

#wrap {
    position: fixed;
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

Auf diese Weise glaubt Safari, dass der Inhalt keine Höhe hat, und Sie können die Höhe der iframe richtig zuweisen. Auf diese Weise können Sie Elemente beliebig positionieren.

Sie können hier eine schnelle und schmutzige Demo sehen.

7
Pier

Ich arbeite mit ionic2 und die Systemkonfiguration ist wie folgt: 


******************************************************

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: 5.0.8 
OS: OS X Yosemite
Node Version: v6.2.2
Xcode version: Xcode 7.2 Build version 7C68



******************************************************

Für mich wurde dieses Problem mit diesem Code gelöst.
für HTML-iframe-Tag

<div class="iframe_container">
      <iframe class= "animated fadeInUp" id="iframe1" [src]='page' frameborder="0" >
        <!--  <img src="img/video-icon.png"> -->
      </iframe><br>
   </div>

Siehe css desselben 


.iframe_container {
  overflow: auto; 
  position: relative; 
  -webkit-overflow-scrolling: touch;
  height: 75%;
}

iframe {
  position:relative;
  top: 2%;
  left: 5%;
  border: 0 !important;
  width: 90%;
}

Positionseigenschaften spielen hier in meinem Fall eine entscheidende Rolle.
position: relativ;

Es kann dir auch helfen !!!

3
S.Yadav

in der Tat für mich arbeitete gerade in ios die Schriftrolle deaktiviert

<iframe src="//www.youraddress.com/" scrolling="no"></iframe>

und Behandeln des Betriebssystems über ein Skript.

0
Luiz Rossi

Für mich haben CSS-Lösungen nicht funktioniert. Aber das programmgesteuerte Einstellen der Breite erledigt den Job. Stellen Sie beim Laden eines Iframes die Breite programmatisch ein:

 $('iframe').width('100%');
0
umer

Dieses Problem ist auch auf iOS Chrome vorhanden.

In meinem Fall brauchte ich eine Ich habe alle oben genannten Lösungen durchgesehen, die meisten sind sehr hackig.

Wenn Sie keine Unterstützung für ältere Browser benötigen, setzen Sie einfach die Breite des Iframes auf 100 vw; iframe { max-width: 100%; /* Limits width to 100% of container */ width: 100vw; /* Sets width to 100% of the viewport width while respecting the max-width above */ } .

Hinweis: Unterstützung für Viewport-Einheiten prüfen https://caniuse.com/#feat=viewport-units

0

Nur-CSS-Lösung

HTML

<div class="container">
    <div class="h_iframe">
        <iframe  src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

html,body {
    height:100%;
}
.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

DEMO

Eine weitere Demo hier mit HTML-Seite im iframe

0
4dgaurav

Ich hatte ein Problem mit der Breite im Inhaltsbereich und erstellte eine horizontale Bildlaufleiste für den Iframe. Es stellte sich heraus, dass ein Bild die Breite breiter hielt als erwartet. Ich konnte es lösen, indem ich alle Bilder css max-width auf ein Prozent festlegte. 

<meta name="viewport" content="width=device-width, initial-scale=1" />

img {
        max-width: 100%;
        height:auto;
    }
0