Hilfe benötigt bei einem Iframe

Hallo Zusammen,
wir möchten in unserer Seite einen Inhalt eines externen Anbieters in einem Frame, bzw. iframe einbauen und benötigen Hilfe. Die Seite wurde mit Contao 3.5.18 erstellt. Der externe Anbieter stellt ein Skript zur Verfügung um den Inhalt in einem dynamischen iframe einzubinden. Dies funktioniert leider nicht und wir erhalten von dem Anbieter nur die Auskunft, dass etwas auf der Seite das Javascript blockiert und wir sollen uns an den Entwickler wenden.

https://www.autohaus-waser.de/fahrze...and-modix-1443

Wir sind auch gerne bereit, für die Lösung unseres Problems einen kleinen Beitrag zu bezahlen.

Diese Seite soll in einem Frame bzw. iframe eingebunden werden: https://modix.autohaus-waser.de

Es müsste doch auch möglich sein, die Seite in zwei Frames aufzuteilen. Im oberen Frame die Menüführung (Header) und im unteren Frame die externe Seite.

Freue mich auf Eure Fragen und Antworten.

Wie schaut denn der Code aus, den Du da einbindest?

HTML-Code:

---

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.5/iframeResizer.min.js"></script>
<script>
    //iFrame Resize
    $('iframe').iFrameResize({
        inPageLinks: true,
        initCallback: function(){
            var top = $('iframe').offset().top;
            if (top < window.pageYOffset){
                scrollTo(0,top);
            }
            return true;
        }
    });
</script>

---

und dann ein Modul angelegt:

HTML-Code:

---

<iframe src="http://modix.autohaus-waser.de/fahrzeugangebot" scrolling="no"></iframe>

---

Zitat:

---

Mixed Content: The page at 'https://www.autohaus-waser.de/fahrzeugbestand-modix-1443' was loaded over HTTPS, but requested an insecure resource 'http://modix.autohaus-waser.de/fahrzeugangebot'. This request has been blocked; the content must be served over HTTPS.

---

;-)

I changed it to https, but it still does not work

Kann die Seite, die du da einbindest, auch https?

Zitat:

---

Zitat von Kahmoon

Kann die Seite, die du da einbindest, auch https?

---

Ja https sollte nicht das Problem sein:

https://modix.autohaus-waser.de/fahrzeugangebot

und was kommt jetzt für ein Fehler?

Zitat:

---

Zitat von Kahmoon

und was kommt jetzt für ein Fehler?

---

Der Iframe wird nicht dynamisch angezeigt, (also nicht in voller Breite und Hohe) sondern nur in einem kleinen Quadrat: https://autohaus-waser.de/fahrzeugbestand-modix-1443

Hab ihn mal auf scrolling="yes" gestellt, dann sieht man ihn besser.

Warum machst du beim iframe nicht von haus aus eine width von 100%?

Zitat:

---

Zitat von Kahmoon

Warum machst du beim iframe nicht von haus aus eine width von 100%?

---

Die Breite ist nicht das Problem, sondern die Höhe.

Aber das JS muss ja einen Fehler werfen oder nicht?


Und sollte das iframe nicht die id "iframe" haben? Also

Code:

---

<iframe src="http://modix.autohaus-waser.de/fahrzeugangebot" width="100%" id="iframe" scrolling="no"></iframe>

---

Zitat:

---

Zitat von Kahmoon

Aber das JS muss ja einen Fehler werfen oder nicht?


Und sollte das iframe nicht die id "iframe" haben? Also

Code:

---

<iframe src="http://modix.autohaus-waser.de/fahrzeugangebot" width="100%" id="iframe" scrolling="no"></iframe>

---

---

Sorry, da reichen jetzt meine Fähigkeiten nicht aus. Wo sehe ich das? Danke für Deine Hilfe.

Zitat:

---

Zitat von Kahmoon

Aber das JS muss ja einen Fehler werfen oder nicht?


Und sollte das iframe nicht die id "iframe" haben? Also

Code:

---

<iframe src="http://modix.autohaus-waser.de/fahrzeugangebot" width="100%" id="iframe" scrolling="no"></iframe>

---

---

Damit erscheint der iframe nicht mehr.

Das ist der Code des Entwicklers:

HTML-Code:

---

hier die aktualisierten Scripts zur Einbindung:

Hauptscript für Funktionalität
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.5/iframeResizer.min.js"></script>

Hiermit wird die grundsätzliche Funktion eingebunden.

Script zur Aktualisierung der iframe-resize-Funktion
<script>
    //iFrame Resize
    $('iframe').iFrameResize({
        inPageLinks: true,
        initCallback: function(){
            var top = $('iframe').offset().top;
            if (top < window.pageYOffset){
                scrollTo(0,top);
            }
            return true;
        }
    });
</script>
Hiermit wird das Script für jeden iFrame aktiviert (funktioniert aber natürlich nur dann, wenn im iFrame-Inhalt das Gegenscript geladen wird). Sollte im <head></head> platziert werden.

CSS für den Internet Explorer / Mobile Safari
iframe.iframeResizer {
  border: none;
  width: 100px;
  min-width: 100%;
  *width: 100%;
  min-height: 320px;
  height: 80vh;
}
Hiermit wird das CSS korrekt für den internet Explorer und Mobile Safari gesetzt. Der vom Kunden eingebundene iframe sollte für dieses Beispiel die Klasse iframeResizer erhalten (er kann die Klasse natürlich auch anders nennen, muss dann aber iframe und CSS anpassen)

---

Zitat:

---

Hiermit wird das Script für jeden iFrame aktiviert (funktioniert aber natürlich nur dann, wenn im iFrame-Inhalt das Gegenscript geladen wird). Sollte im <head></head> platziert werden.

---

Ist das passiert?

Hast Du vielleicht ein Browserplugin installiert, welches den Zugriff blockt? Kannst Du einen Link zur Seite posten, wo Du das eingebunden hast? Ich habe es gerade eben in einer Demo-Installation getestet und dort wurde das Iframe korrekt angezeigt.

Zitat:

---

Zitat von Kahmoon

Ist das passiert?

---

Hab ich hoffentlich korrekt eingetragen. Kannst Du das im Quelltext der Seite erkennen?

Zitat:

---

Zitat von xchs

Hast Du vielleicht ein Browserplugin installiert, welches den Zugriff blockt? Kannst Du einen Link zur Seite posten, wo Du das eingebunden hast? Ich habe es gerade eben in einer Demo-Installation getestet und dort wurde das Iframe korrekt angezeigt.

---

https://autohaus-waser.de/fahrzeugbestand-modix-1443

Zitat:

---

Zitat von Xipoli

HTML-Code:

---

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.5/iframeResizer.min.js"></script>
<script>
    //iFrame Resize
    $('iframe').iFrameResize({
        inPageLinks: true,
        initCallback: function(){
            var top = $('iframe').offset().top;
            if (top < window.pageYOffset){
                scrollTo(0,top);
            }
            return true;
        }
    });
</script>

---

und dann ein Modul angelegt:

HTML-Code:

---

<iframe src="http://modix.autohaus-waser.de/fahrzeugangebot" scrolling="no"></iframe>

---

---

So hab ich es eingebunden. Hab ich da was vergessen?

Binde mal das Skript und die Konfiguration

HTML-Code:

---

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.5/iframeResizer.min.js"></script>
<script>
    //iFrame Resize
    $('iframe').iFrameResize({
        inPageLinks: true,
        initCallback: function(){
            var top = $('iframe').offset().top;
            if (top < window.pageYOffset){
                scrollTo(0,top);
            }
            return true;
        }
    });
</script>

---

nicht via "Zusätzliche <head>-Tags" im Seitenlayout ein, sondern über "Eigener JavaScript-Code" am Seitenende.

Zitat:

---

Zitat von xchs

Binde mal das Skript und die Konfiguration

HTML-Code:

---

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.5/iframeResizer.min.js"></script>
<script>
    //iFrame Resize
    $('iframe').iFrameResize({
        inPageLinks: true,
        initCallback: function(){
            var top = $('iframe').offset().top;
            if (top < window.pageYOffset){
                scrollTo(0,top);
            }
            return true;
        }
    });
</script>

---

nicht via "Zusätzliche <head>-Tags" im Seitenlayout ein, sondern über "Eigener JavaScript-Code" am Seitenende.

---

Das Script ist jetzt am Seitenende.

Kann mir die htaccess irgendetwas blockieren?

Ändere den Konfigurationsteil folgendermaßen:

HTML-Code:

---

<script>
  //iFrame Resize
  (function($) {
    $('iframe').iFrameResize({
        inPageLinks: true,
        initCallback: function(){
            var top = $('iframe').offset().top;
            if (top < window.pageYOffset){
                scrollTo(0,top);
            }
            return true;
        }
    });
  })(jQuery);
</script>

---

Zitat:

---

Zitat von xchs

Ändere den Konfigurationsteil folgendermaßen:

HTML-Code:

---

<script>
  //iFrame Resize
  (function($) {
    $('iframe').iFrameResize({
        inPageLinks: true,
        initCallback: function(){
            var top = $('iframe').offset().top;
            if (top < window.pageYOffset){
                scrollTo(0,top);
            }
            return true;
        }
    });
  })(jQuery);
</script>

---

---

Passiert auch nix

Okay, so dann:

HTML-Code:

---

<script>
  //iFrame Resize
  (function($) {
    $(document).ready(function() {
      $('iframe').iFrameResize({
          inPageLinks: true,
          initCallback: function(){
              var top = $('iframe').offset().top;
              if (top < window.pageYOffset){
                  scrollTo(0,top);
              }
              return true;
          }
      });
    });
  })(jQuery);
</script>

---

Zitat:

---

Zitat von xchs

Okay, so dann:

HTML-Code:

---

<script>
  //iFrame Resize
  (function($) {
    $(document).ready(function() {
      $('iframe').iFrameResize({
          inPageLinks: true,
          initCallback: function(){
              var top = $('iframe').offset().top;
              if (top < window.pageYOffset){
                  scrollTo(0,top);
              }
              return true;
          }
      });
    });
  })(jQuery);
</script>

---

---

Auch wieder bei Eigener JavaScript-Code? Bei mir ändert sich nichts.

Ach nein, jetzt sehe ich es erst: Du hast ja das

HTML-Code:

---

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.5/iframeResizer.min.js"></script>

---

nicht mehr dabei. Das Skript musst Du natürlich auch laden, sonst funktioniert es klarerweise nicht.

Zitat:

---

Zitat von xchs

Ach nein, jetzt sehe ich es erst: Du hast ja das

HTML-Code:

---

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.5/iframeResizer.min.js"></script>

---

nicht mehr dabei. Das Skript musst Du natürlich auch laden, sonst funktioniert es klarerweise nicht.

---

ES PASST. Ich werd verrrückt. Vielen Dank!

Ich hab ein kleines Budget für die Lösung. Kann ich Dir irgendwie etwas zukommen lassen.

Danke, das ist nett von Dir, aber das passt schon so.

Zitat:

---

Zitat von xchs

Danke, das ist nett von Dir, aber das passt schon so.

---

Super! Nochmals vielen Dank!
Vor allem für Deine Geduld!

Gern geschehen.

Hallo, also ich würde die Lösung auch gerne nutzen. Ich möchte mit der Lösung mein XenForo Forum einbinden.
Leider verstehe ich nicht was ich wo einbinden muss.
Vielleicht könnte mir jemand helfen. Bei unserem Projekt ist die Kasse auch knapp aber umsonst soll es nicht sein. :)
Würde mich über ein Hilfsangebot oder einer Nachvollziehbaren Anleitung sehr freuen. :)
Grüße Markus