Externe Seite in einem I Frame öffnen und responsive 
Author: Uwe W.Hallo
Ich wollte auf meiner Seite https://www.mainzertor.de/test/ unter - Kulinarisches - Restaurant
eine externe / online Speisekarte anzeigen lassen.
Diese liegt unter Speisekarte.de und der Link dazu ist
http://www.speisekarte.de/gastro_menu_outside?id=467231
da ich die Speisekarte an einem zentralen Ort ändern, erweitern und pflegen kann.
Leider wird mir nur die leere Fläche nach dem hochladen angezeigt, im Programm Website X5 Evo wird mir aber alles angezeigt, und es funktioniert.
Dort habe ich dann unter : - Seiten - einen - HTML Code eingefügt ( wie auf dem Bild zu sehen ist ) mit dem Code :
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
<div>
<iframe src="http://www.speisekarte.de/gastro_menu_outside?id=467231" id="idIframe" onload="iframeLoaded()" style="border: none; width:100%; margin: 0 0 0 1%;" allowfullscreen scrolling="no"> </iframe>
</div>
Die Seite ist Responsive gehalten genau wie der Link ( Speisekarte ).
Ich würde auch gerne keinen Scrollbalken haben wenn möglich bei der Speisekarte, wenn diese verändert wird.
Also die Höhe sollte sich automatisch anpassen.
Über Hilfe würde ich mich freuen.
Lg Uwe
Also als ersters lösche mal die leeren Reihen raus.
Die Seite hat schon ein Zertifikat und deshalb musst du https:// nehmen!
Das Javaskript benötigst du nicht und kannst es löschen.
Im HTML Objekt nichts anhaken sondern meinen Code einfach reinkopieren..
<iframe src="https://www.speisekarte.de/gastro_menu_outside?id=467231" style="border:0px #ffffff none;" name="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="800px" width="100%px" allowfullscreen></iframe>
Author
Hallo Andreas
Erst mal vielen Dank für deine Hilfe.
Habe Deinen Code genommen und Ihn eingefügt, und es funktioniert.
Leider ist noch ein Scrollbalken bei der Speisekarte, bekommt man diesen auch weg?
Und es ist ein riesiges freies Feld unter der Karte zu sehen. Verstehe ich nicht ?
Lg Uwe
Ich habe die Höhe im Code auf 800px eingestellt. Wenn du es kürzer willst musst du den Wert ändern, aber der Scrollbalken bleibt. Du kannst aber auch auf 7500px die Höhe stellen, dann hast du keinen Scrollbalken.
(It > De)
... damit Ihr <script> -Code funktioniert, muss die in IFRAME importierte Seite zur selben Domain gehören wie die Site-Seite ...
.
Author
Hallo
Vielen Dank für die Hilfe.
Habe mir noch mal eine saubere Kopie meiner Seite gemacht und den neuen Code eingegeben, und alles funktioniert wie gewünscht.
Auch der leere Abschnitt ist verschwunden.
Kann man die Höhe so einstellen das Sie sich automatisch anpassen wenn man etwas im original ändert, oder ist das nicht möglich?
Danke noch mal
Gruß Uwe aus dem regnerischen Alsfeld
Es geht hier um Iframe Einbindungen.
Wenn du den code in ein HTML-Objekt einfügst, dann hast du 2 Dinge!
1. die Höhe des HTML-Objekts und
2. die Höhe des Iframes vom Code her.
Den Code vom Iframe kannst du auch von der Höhe auf 100% stellen. Dann wäre theoretisch bei Veränderungen der externen Seite immer alles sichtbar. Aber das HTML-Objekt hat eine fixe Höhe die einstellbar ist. Da lässt sich nichts daran ändern.
... ... ja, mit EXTRA-Code ist das möglich ...
...
...in Ihrem IFRAME-Code müssen Sie zwei Korrekturen vornehmen:
... ersetze name="myiFrame" durch >> ID="myiFrame"
... Ersetzen Sie scrolling="yes" durch >> scrolling="no"
... benachrichtigen Sie mich, wenn Sie korrigiert haben, dann werde ich Ihnen einen einfachen Code zum einfachen Einfügen übergeben.
Author
Nochmals vielen Dank für die Hilfe
KolAsim = ich habe heute den Code ersetzt und die Seite wieder hochgeladen, habe aber unter Heigt = 5800px eingestellt damit kein Scrollbalken zu sehen ist.
Gruß Uwe
(It > De) ... im Netz gibt es keine Korrektur:
<iframe src="https://www.speisekarte.de/gastro_menu_outside?id=467231" style="border:0px #ffffff none;" name="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="5800px" width="100%px" allowfullscreen></iframe>
... der IFRAME muss so sein:
<iframe src="https://www.speisekarte.de/gastro_menu_outside?id=467231" style="border:0px #ffffff none;" ID="myiFrame" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" height="5800" width="100%" allowfullscreen></iframe>
... benachrichtigen Sie mich, wenn Sie die beiden Korrekturen vorgenommen haben ...
Hallo, ciao
.