Ich stoße auf ein seltsames Problem beim Einbetten eines iframe mit einem bestimmten src innerhalb eines absolut positionierten div. Hier ist die grundlegende Markup der Seite:Browserproblem beim Einbetten eines iframe in absolute div
.container {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
html, body {
padding: 0;
margin: 0;
}
.content {
position: absolute;
top: 50px;
right: -400px;
width: 300px;
height: 400px;
background-color: blue;
}
iframe {
width: 300px;
height: 200px;
}<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo sit amet elit sed cursus. Fusce nibh nibh, venenatis consectetur hendrerit sed, aliquam sit amet eros. Sed sem augue, tristique ut odio sit amet, euismod bibendum nunc. Nullam ac ligula pharetra, ultrices lorem id, porttitor enim. Nullam sit amet sagittis erat.
<div class="content">
<iframe src="https://app-apac.thebookingbutton.com/properties/yaangcomedirect"></iframe>
</div>
</div>Die div .container deckt die gesamte Seite; Darin ist ein div .content absolut relativ zu .content div, die nicht sichtbar sein sollte, versteckt durch die right:-400px Eigenschaft und ihre Breite, das ist 300px.
Wenn der Iframe geladen wird, scheint die ganze Seite nach links verschoben zu sein. Sie können dieses Verhalten durch den eingefügten Dummy-Text, der jetzt geschnitten wird, und den Iframe sehen, der jetzt teilweise sichtbar ist.
Dies wird angezeigt, wenn der iframe noch geladen wird: ist https://i.imgsafe.org/89a753d.jpg
Wenn der Iframe geladen wird, wird dies angezeigt: https://i.imgsafe.org/8820624.jpg
ich hinaus stoßen dieses Problem in Chrome, Firefox und Edge-ihre letzte stabile Version, also denke ich, dass dies wahrscheinlich kein Browser-Problem sein könnte. Ich weiß sicher, dass andere Quellen für den Iframe sehr gut funktionieren und dieses Problem nicht angezeigt wird. Außerdem bin ich mir bewusst, dass ein Cross-Origin-Frame nicht auf die Dokumenteigenschaften des Top-Frame zu bekommen, und das ist wahrscheinlich das, was diese Geschichte sehr seltsam macht.
Darüber hinaus gibt es in der Entwicklerkonsole in Chrome oder Firebug keinen Knoten, der das style-Attribut anzeigt (wenn ein JavaScript das ursprüngliche Markup ändern könnte). Es tut mir leid zu sagen, dass ich den Iframe-Inhalt nicht kontrolliere, dies ist Cross-Origin für die meisten Fälle.
Können Sie mir mehr darüber erzählen? Ich habe gelesen this question, das scheint ein ähnlicher Fall, aber es war nicht hilfreich.
P.S. Dies ist meine erste StackOverflow-Frage, in der Hoffnung, dass ich gut darin gewesen bin, sie zu schreiben :) Fühlen Sie sich frei, mehr darüber zu fragen.
EDIT: das absolut positionierte div muss an dieser Position sein. Offensichtlich sollte es versteckt sein, und dies ist das gewünschte Verhalten. Ich kann nicht herausfinden, warum es nach dem Iframe-Laden plötzlich sichtbar wird.
EDIT2: Ich habe den Code vereinfacht, jetzt ist die html, body Regel gibt es nur um Leerzeichen um die Seite zu schneiden.
Ich versuche, die Produktionsumgebung zu reproduzieren. Das div, das den iframe enthält, sollte tatsächlich hinter der rechten Kante liegen und sollte auch nach dem Iframe-Laden zurückbleiben. Zur Komplexität muss das Container-Div bei 100% Breite und Höhe des Browserfensters liegen. – Marco
@MarcoTodisco Siehe den Hinweis, warum es nicht funktioniert. – Green
Vielen Dank für Ihre nützliche Bearbeitung. Ich habe das Beispiel vereinfacht und Überlauf- und Positionseigenschaften von HTML- und Body-Selektoren entfernt. Das Problem ist jedoch immer noch da. Tatsächlich scrollt der Browser zum iframe, aber wie kann das möglich sein, wenn der iframe Kreuzursprung hat? – Marco