Einen Iframe ansprechen lassen

144

Ich habe diesen Stackoverflow-Beitrag mit dem Titel "Können Sie einen iFrame reaktionsfähig machen?" Gelesen, und einer der Kommentare / Antworten führte mich zu dieser Geige.

Aber als ich versuchte, HTML und CSS so zu implementieren, dass es meinen Anforderungen entsprach, hatte ich nicht die gleichen Ergebnisse / Erfolge. Ich habe meine eigene JS-Geige erstellt, damit ich Ihnen zeigen kann, dass es bei mir nicht genauso funktioniert. Ich bin mir sicher, dass dies etwas mit dem von mir verwendeten iFrame-Typ zu tun hat (z. B. müssen die Produktbilder möglicherweise auch reagieren oder so?)

Mein Hauptanliegen ist, dass wenn meine Blog-Leser mein Blog auf ihrem iPhone besuchen, ich nicht möchte, dass alles auf x-Breite ist (100% für alle meine Inhalte) und sich der iFrame dann schlecht verhält und das einzige Element ist, das breiter ist (und daher haftet) über alle anderen Inhalte hinaus - wenn das Sinn macht ??)

Weiß jemand, warum es nicht funktioniert? Danke.

Hier ist das HTML & CSS von MY JSFIDDLE (wenn Sie nicht auf den Link klicken möchten):

<div class="wrapper">
  <div class="h_iframe">
    <!-- a transparent image is preferable -->
    <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
    <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585'
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

und hier ist das begleitende CSS:

.wrapper {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #ffffff;
}

.h_iframe {
  position: relative;
}

.h_iframe .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
Brighton
quelle
6
Der Iframe selbst ('die Box') kann reagieren. Aber alles innerhalb des Iframes ist eine separate Seite und daher weder in der Domäne Ihres CSS noch von JS.
DA.
Sie können easyXDM für die Kommunikation zwischen der Seite, auf der i-frame eingebettet ist, und dem Dokument auf dem Server verwenden, auf das der iframe verweist.
John Smith
1
Ich bevorzuge reines CSS: stackoverflow.com/a/26194041/274502
Cregox

Antworten:

107

Ich präsentiere Ihnen die Incredible Singing Cat Lösung =)

.wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

jsFiddle: http://jsfiddle.net/omarjuvera/8zkunqxy/2/
Wenn Sie die Fensterleiste verschieben, wird der Iframe angezeigt , um die Größe zu ändern


Alternativ können Sie auch die intrinsische Verhältnis-Technik verwenden. Dies ist nur eine alternative Option der oben genannten Lösung (Tomate, Tomate).

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
} 

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
Omar
quelle
4
Siehe auch diesen Artikel, der diese Technik ausführlicher erklärt: smashingmagazine.com/2014/02/…
Thomas Tempelmann
funktioniert nur für youtube iframes. Siehe dies: jsfiddle.net/1bd8qw76
csandreas1
2
Diese Technik funktioniert für alle Iframes. Der Trick ist, dass der Inhalt des Iframes ebenfalls reagieren
Ben Marshall
68

Versuchen Sie, diesen Code zu verwenden, damit er reagiert

iframe, object, embed {
    max-width: 100%;
}
Connor Kissen Mulhall
quelle
37
Mit diesem Code passen Sie die Höhe des Containers nicht an.
Reggie
46

Ich habe eine Lösung von Dave Rupert / Chris Coyier gefunden. Ich wollte die Schriftrolle jedoch verfügbar machen, also kam ich auf Folgendes:

// HTML

<div class="myIframe"> 
   <iframe> </iframe> 
</div>

// CSS

.myIframe {
     position: relative;
     padding-bottom: 65.25%;
     padding-top: 30px;
     height: 0;
     overflow: auto; 
     -webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY 
     border: solid black 1px;
} 
.myIframe iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
Avi
quelle
2
Zukunftsnotiz für mich, wenn Content Padding-Bottom das Verhältnis der Inhaltsbreite ist, 800x600 ist% 75, 800x536 ist% 67
nerkn
1
Dies ist ein guter Ausgangspunkt, um Iframes für Sarafi und alle Geräte scrollen zu lassen. sehr traurig obwohl ...
klewis
Dies ist genau das, was ich brauchte, um den Iframe scrollen zu lassen, da er über 5000px lang war. Die anderen Codes haben den langen iFrame gezwungen, den folgenden Inhalt zu überlagern.
Penmas
für 16: 9 sollte der Polsterboden 56,25%
betragen
17

Sie können diese auf dieser Website genannten Tricks verwenden: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php .

Es ist sehr nützlich und leicht zu verstehen. Alles was Sie brauchen, um zu erstellen

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Hier ist Ihre bearbeitete js Geige zur Demonstration.

Pragnesh Chaudhari
quelle
10

Schauen Sie sich diese Lösung an ... funktioniert für mich >> https://jsfiddle.net/y49jpdns/

<html lang="en" class="no-js">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <style>
      html body {width: 100%;height: 100%;padding: 0px;margin: 0px;overflow: hidden;font-family: arial;font-size: 10px;color: #6e6e6e;background-color: #000;} #preview-frame {width: 100%;background-color: #fff;}</style>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script>
         var calcHeight = function() {
           $('#preview-frame').height($(window).height());
         }

         $(document).ready(function() {
           calcHeight();
         }); 

         $(window).resize(function() {
           calcHeight();
         }).load(function() {
           calcHeight();
         });
      </script>
   </head>
   <body>
      <iframe id="preview-frame" src="http://leowebguy.com/" name="preview-frame" frameborder="0" noresize="noresize">
      </iframe>
   </body>
</html>
Leo Leoncio
quelle
Ich habe deine Geige aktualisiert, da hier und da einige falsche Teile waren. Es ist das gleiche und es funktioniert genauso, aber ohne verwirrende Teile. jsfiddle.net/6NSX3/263
Techno.Shaman
IOS berechnet die Höhe nicht korrekt, sondern berücksichtigt die Navigationsleiste. Auch Iframe unter IOS ist nicht scrollbar.
Tine Koloini
9
iframe{
  max-width: 100% !important;
}
Christian Michael
quelle
6

DA ist richtig. In Ihrer eigenen Geige reagiert der Iframe tatsächlich. Sie können dies in Firebug überprüfen, indem Sie die Größe der Iframe-Box überprüfen. Einige Elemente in diesem Iframe reagieren jedoch nicht, sodass sie bei kleinen Fenstern "herausragen". Die div#products-post-wrapperBreite beträgt beispielsweise 8800px.

Philip007
quelle
5

iFrames können mit einer kleinen CSS-Technik, der so genannten Intrinsic Ratio-Technik , VOLLSTÄNDIG reagieren, während das Seitenverhältnis beibehalten wird . Ich habe einen Blog-Beitrag geschrieben, der sich speziell mit dieser Frage befasst: https://benmarshall.me/responsive-iframes/

Dieser Kern ist:

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}


/* 16x9 Aspect Ratio */

.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}


/* 4x3 Aspect Ratio */

.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

.intrinsic-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="intrinsic-container intrinsic-container-16x9">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

BOOM, voll ansprechbar!

Ben Marshall
quelle
3

iframes kann nicht reagieren. Sie können den iframe-Container reaktionsfähig machen, jedoch nicht den angezeigten Inhalt, da es sich um eine Webseite handelt, für die eine eigene Höhe und Breite festgelegt wurde.

Der Beispiel-Geigenlink funktioniert, weil er einen eingebetteten YouTube-Videolink anzeigt, für den keine Größe deklariert ist.

MGDTech
quelle
Das ist irreführend. Der Beispiel-Geigen-Link funktioniert auch, wenn die Breite und Höhe des YouTube-Iframes angegeben werden.
Philip007
14
Ich bin enttäuscht, dass dies so hart abgelehnt wird. Die Botschaft, die er vermittelt, ist wichtig; dass es gefährlich ist, iFrames reaktionsfähig zu machen, weil Sie der Laune der Reaktionsfähigkeit der Quelle unterliegen. Ja, Youtube ist die Ausnahme. Aber sein Punkt ist immer noch gültig.
MattWithoos
3

Einfach mit CSS:

iframe{
width: 100%;
max-width: 800px /*this can be anything you wish, to show, as default size*/
}

Bitte beachten Sie : Der Inhalt wird dadurch jedoch nicht reagiert!

2. BEARBEITUNG :: Es gibt zwei Arten von responsiven Iframes, abhängig von ihrem inneren Inhalt:

Eine, bei der das Innere des Iframes nur ein Video oder ein Bild oder viele vertikal positionierte enthält, für die die obigen zwei Zeilen CSS-Code fast vollständig ausreichen und das Seitenverhältnis eine Bedeutung hat ...

und der andere ist der:

Art des Inhalts des Kontakt- / Registrierungsformulars , bei dem nicht das Seitenverhältnis beibehalten werden muss, sondern um zu verhindern, dass die Bildlaufleiste angezeigt wird und der Inhalt unter den Container fließt. Auf Mobilgeräten wird die Bildlaufleiste nicht angezeigt. Sie scrollen nur, bis Sie den Inhalt (des Iframes) sehen. Natürlich geben Sie es zumindest eine Art height, um die Höhe des Inhalts an den vertikalen Raum anzupassen, der auf einem schmaleren Bildschirm auftritt - mit Medienabfragen, wie zum Beispiel:

@media (max-width: 640px){
iframe{
height: 1200px /*whatever you need, to make the scrollbar hide on testing, and the content of the iframe reveal (on mobile/phone or other target devices) */
}
}
@media (max-width: 420px){
iframe{
height: 1600px /*and so on until and as needed */
}
}
Sándor Zuboly
quelle
1
Das ist einfach und großartig
Vaishali Kapadia
Dadurch wird das Seitenverhältnis nicht beibehalten, da die Größe des Iframes geändert wird, dh die Höhe bleibt unabhängig von der Breite gleich.
Ryan
@ryan Ich habe meine Antwort aktualisiert. Ich stimme Ihnen übrigens teilweise zu.
Sándor Zuboly
2

Ich bemerkte, dass der Beitrag von leowebdev an meinem Ende zu funktionieren schien, jedoch zwei Elemente der Site, die ich erstellen möchte, ausschaltete: das Scrollen und die Fußzeile.

Das Scrollen habe ich durch Hinzufügen eines scrolling="yes" To the iframe-Einbettungscodes erhalten.

Ich bin nicht sicher, ob die Fußzeile aufgrund der Reaktionsfähigkeit automatisch ausgeschaltet wird oder nicht, aber hoffentlich kennt jemand anderes diese Antwort.

Chris Knabenshue
quelle
2

Entfernen Sie die in Pixel angegebene Höhe und Breite des Iframes und verwenden Sie den Prozentsatz

iframe{  max-width: 100%;}
Jestin
quelle
1
Insider-Inhalte wurden jedoch nicht reaktionsschnell.
Vir
1
<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}
Saran
quelle
1

Es löste mich, indem es den Code von @Connor Cushion Mulhall von anpasste

iframe, object, embed {
  width: 100%;
  display: block !important;
}

Savangchai Saroj
quelle
1
Loslegen

Aus Sicherheitsgründen des Browsers müssen Sie die Javascript-Datei sowohl auf der übergeordneten Seite als auch auf der Seite, die über einen Iframe (untergeordnetes Element) eingebettet wird, einfügen.

In der aktuellen Version muss die übergeordnete Seite die neueste Version von jQuery enthalten. Es gibt keine Abhängigkeit von jQuery für die Funktionalität der untergeordneten Seite. In zukünftigen Versionen möchten wir die Abhängigkeit von jQuery auch für das übergeordnete Element entfernen.

Hinweis: Der Parameter "xdomain" im Funktionsaufruf makeResponsive () ist optional.

Codebeispiel <!-- Activate responsiveness in the "child" page --><script src="/js/jquery.responsiveiframe.js"></script><script> var ri = responsiveIframe(); ri.allowResponsiveEmbedding();</script> <!-- Corresponding code in the "parent" page --><script src="/js/jquery.js"></script><script src="/js/jquery.responsiveiframe.js"></script><script> ;(function($){ $(function(){ $('#myIframeID').responsiveIframe({ xdomain: '*'}); }); })(jQuery);</script>
Ahmed Elcheikh
quelle
0

Mit folgendem Markup:

<div class="video"><iframe src="https://www.youtube.com/embed/StTqXEQ2l-Y"></iframe></div>

Das folgende CSS macht das Video in voller Breite und 16: 9:

.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

.video > .video__iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
  }
}
Dorian
quelle
0

Ich suche mehr zu diesem Thema und bekomme endlich eine nette Antwort. Sie können wie versuchen , diese :

.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
<div class="wrapper">
  <div class="container">
    <iframe src="there is path of your iframe"></iframe>
   </div>
</div>

Lorbeer
quelle
0

Wenden Sie einfach den folgenden Code an, um einen "Iframe" ansprechbar zu machen und auf alle Gerätebildschirme zu passen (funktioniert hervorragend mit Games-Websites):

iframe::-webkit-scrollbar{display:none}
.iframe{background:#fff;overflow:hidden}
.iframe iframe{width:100%;height:540px;border:0;display:block}
.iframe-content{position:absolute;width:100%;height:540px;overflow:auto;top:0;bottom:0;-webkit-overflow-scrolling:touch}

@media screen and (max-width:992px){.iframe iframe{height:720px}}
@media screen and (max-width:768px){.iframe iframe{height:720px}}
@media screen and (max-width:720px){.iframe iframe{height:720px}}
@media screen and (max-width:479px){.iframe iframe{height:480px}}
@media screen and (max-height:400px){.iframe iframe{height:360px}}

Wenn Sie nach einem reaktionsschnellen Spielecontainer suchen, der für alle Geräte geeignet ist, wenden Sie diesen Code an, der erweiterte CSS @ media-Abfragen verwendet.

Mizo-Spiele
quelle
Hallo, der Iframe-HTML-Code ist einfach und sieht einfach so aus:
Mizo Games
<div class = "iframe"> <iframe src = ""> </ iframe> </ div>
Mizo Games
Eigentlich benutze ich es mit meiner Website: Al3abMizo Games, und Sie können es versuchen, indem Sie jedes Spiel auf jedem Gerät spielen, unabhängig von der Bildschirmgröße.
Mizo Games
0

Vollständig reagierender iFrame für Situationen, in denen das Seitenverhältnis unbekannt ist und der Inhalt im iFrame vollständig reagiert.

Keine der oben genannten Lösungen funktionierte für meine Anforderungen, nämlich die Erstellung eines vollständig reaktionsfähigen iFrame mit vollständig reaktionsschnellen dynamischen Inhalten. Das Beibehalten eines Seitenverhältnisses war keine Option.

  1. Holen Sie sich die Höhe Ihrer Navigationsleiste und aller Inhalte über oder unter dem iFrame. In meinem Fall musste ich nur die obere Navigationsleiste subtrahieren und wollte, dass der iFrame bis zum unteren Bildschirmrand ausgefüllt wird.

Code:

function getWindowHeight() {
        console.log('Get Window Height Called')
        var currentWindowHeight = $(window).height()

        var iFrame = document.getElementById("myframe")
        var frameHeight = currentWindowHeight - 95

        iFrame.height = frameHeight; 

    }
//Timeout to prevent function from repeatedly firing
    var doit;
    window.onresize = function(){
      clearTimeout(doit);
      doit = setTimeout(resizedw, 100);
    };

Ich habe auch eine Zeitüberschreitung erstellt, damit die Funktion beim Ändern der Größe nicht millionenfach aufgerufen wird.

JPeG
quelle
0
For Example :

<div class="intrinsic-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

CSS 

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
KTrivedi
quelle
0

Schauen Sie sich diesen vollständigen Code an. Sie können die Container in Prozent wie im folgenden Code verwenden:

<html>
<head>
<title>How to make Iframe Responsive</title>
<style>
html,body        {height:100%;}
.wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
</style>
</head>
<body>
<div class="wrapper">
<div class="h_iframe">
<img class="ratio" src=""/>
<iframe src="http://www.sanwebcorner.com" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
</div>
</body>
</html>

Schauen Sie sich diese Demoseite an.

M. Lak
quelle