Magnific Popup, iframe Größe automatisch anpassen auf den Inhalt ändern (cross-domain)

Im moment sind wir nur über die iframe Art von Magnific Popup (jQuery-plugin). Aber das popup nicht die Größe, es ist die Höhe, wenn der Inhalt des iframe wächst/schrumpft dynamisch. Ich denke, für die inline-Inhalte Größenänderung scheint zu funktionieren aber.

Suchte ich in der Dokumentation und im web, aber konnte nicht finden keine Lösung.

Deshalb war ich auf der Suche für Lösungen von Drittanbietern, um Größe automatisch anpassen (cross-domain) von iframes auf den Inhalt ändern.
Am besten fand ich bisher (nach einer einfachen Lösung) sind:

jQuery resize-Ereignis (mit einer Gabel, da die Originale scheint es nicht zu erhalten)

zu können, binden Sie ein resize-Ereignis in Verbindung mit:

jQuery postMessage (mit Hilfe einer Gabel aus demselben Grund)

zur Umsetzung von cross-domain-Kommunikation zwischen iframe und parent (wegen der same-origin-policy).

(Nicht post-links zu den Gabeln, da dies ist meine erste Frage und ich bin nur posten darf zwei links... )

Ich habe diejenigen, die für einen einfachen test iframe, jetzt will ich implementieren diese in Magnific Popup -.

Nur jetzt habe ich stumbeld auf ein resize-Ereignis in der Dokumentation, die ist schon eingebaut MFP: "resize-Ereignis triggert nur, wenn die Höhe geändert wird oder das layout gezwungen". Aber es wird nicht ausgelöst, wenn ich mehr/weniger anzeigen text im iframe basiert auf einem select-Eingang (nur zum testen so weit, aber das ist, was ich brauche im moment).

Also vor der Implementierung der alle jene plugins, die ich dachte, vielleicht ich Fragen, ob jemand schon eine funktionierende Lösung für dieses oder ob ich einfach nur übersehen, eine eingebaute Funktion/nicht verwenden es richtig. Ich bin ziemlich neu in JavaScript.

Vielen Dank im Voraus

InformationsquelleAutor Oliver | 2014-05-14

2

Können Sie verwenden: https://github.com/davidjbradshaw/iframe-resizer

Dies erfordert, dass Sie ein Skript hinzufügen, um dem laden der Seite die <iframe>:
```
<script type="text/javascript" src="../iframeResizer.min.js"></script> 
```
Sowie die externe Seite, die Sie versuchen zu laden, Innerhalb des <iframe>:
```
<script type="text/javascript" src="../iframeResizer.contentWindow.min.js"></script>
```
Hinweis: Wenn Sie versuchen zu laden, eine externe Domäne, die nicht selbst, dies funktioniert möglicherweise nicht für Sie, denn Sie müssen ein Skript Hinzugefügt, in beiden Orten (sorry), aber das WIRD funktionieren, wenn Sie versuchen zu laden, eine HTTPS-Seite in einer NICHT HTTPS Seite.

Ich auch definieren meinen eigenen markup für das magnific popup in das Skript.
```
      $(document).ready(function() {
        $('.open-popup').magnificPopup({
            items: {src: '/file.html'},
            type: 'iframe',
              iframe: {
                 markup: '<div class="iframe-popup">'+
                            '<iframe class="mfp-iframe" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe>'+
                            '<div class="mfp-close"></div>'+
                          '</div>'
              },
        });
      });
```
Können Sie die Größe der Breite des iframe einfach mit CSS zu 100% des übergeordneten Fensters... so lange wie Sie haben eine max-width auf Ihrem Elternteil (.iframe-popup im Beispiel oben).

Einer großen Sache, die ich herausgefunden, dass magnific hat tatsächlich eine Größe callback im code:
```
    callbacks: {
        resize: function() {
            $('iframe').iFrameResize([{
                enablePublicMethods: true,
                checkOrigin: false
            }]);
         }
```
Das ist es. Funktioniert für mich jedes mal.
- Schöner, kleiner code, aber es scheint nicht zu funktionieren cross-domain (same-origin-policy). Auch hängt es von onload, also es würde nicht funktionieren, wenn der iframe-Inhalt ändert ohne neu laden (z.B. Ajax)?
- Ich bearbeitet meine Antwort, zu sehen, ob dies für Sie arbeitet. Danke!
- Ich denke, dass nicht die überprüfung der Herkunft bei der Verwendung von PostMessage ist ein Sicherheitsrisiko. Siehe "Sicherheits-Bedenken" hier: developer.mozilla.org/en-US/docs/Web/API/window.postMessage Aber vielen Dank für das update! Wenn ich habe meine Forschung, ich war die überprüfung dieser iframe risizer Skript auch, aber habe es nicht verwenden aus irgendeinem Grund, vielleicht weil es IE8+ und ursprünglich unser Projekt noch unterstützen mussten IE7 (nicht mehr aber). Die Lösung, die ich gepostet ist IE6+ und funktioniert auch bei mir. Aber ich muss sagen, dein code ist viel(!) kleiner, ich werde versuchen (mit überprüfung der Herkunft), wenn ich etwas Zeit hat, danke!
InformationsquelleAutor vitaly87
1

Da scheint es nicht zu sein, eine integrierte Lösung für die automatische Größenänderung von (nicht-video) iframes in Magnific Popup baute ich meine eigene Lösung mit externen plugins, wie oben erwähnt.

Um zu überprüfen, ob der iframe-Inhalt Höhe hat sich geändert, die ich verwendet diese Gabel von jQuery resize-Ereignis-plugin, die kompatibel mit der aktuellen jQuery-version 1.11.1.

Senden Sie die neue Höhe vom iframe an parent-Fenster (cross-domain-kompatibel) landete ich mit diesen jQuery postMessage-Plugin, das scheint zu sein, gut gepflegt und funktioniert im IE6+.

Auch ich wechselte zu verwenden "Typ: inline" von Magnific Popup für die Anzeige der iframes, da "Typ: iframe" zu sein scheint, speziell gestylt für iframe einbetten von Videos wie YouTube videos, das machte es schwer für mich zu Stil popup-Höhe in einer einfachen Weise.

Gibt es vielleicht einen Reiniger/straight-forward-Lösung, das ist, warum ich nicht in zu viel details. Ein weiterer Grund ist, dass ich durchaus ein paar Zeilen code für die Implementierung der MFP-und da ich bin neu in JS ist es vielleicht nicht die beste code 😉
Aber da gab es keine Antwort, doch ich werde markieren Sie diese als Antwort akzeptiert, weil es funktioniert.

Beste Lösung wäre es natürlich, wenn Magnific Popup hätte eine eingebaute Lösung (feature-request!).
- Was auch viel geholfen, als ein starter war dies Beispiel für iframe resizing. Beachten Sie jedoch, dass er verwendet seine eigene jQuery-postMessage-plugin, das nicht kompatibel ist mit der aktuellen jQuery-Version. Hatte in diesem post als Kommentar, da ich noch nur post 2 Links pro Post...
- Oliver, habe ich bearbeitet meine Antwort. Wenn du github.com/davidjbradshaw/iframe-resizer, es sollte Ihnen zu helfen. Mir ist auch aufgefallen, dass magnific hat eine Größe Rückruf, die können Sie ignorieren die Herkunft der iframe. Ich habe implementiert, diese Lösung auf meiner webstore, und so weit es funktionierte reibungslos. Viel Glück!
InformationsquelleAutor Oliver
0

Ich war auf der Suche nach der Lösung und fand nur eine einfache Lösung für nicht-cross-domain-Kommunikation ohne Verwendung eines plugins. (Ich habe nicht getestet, cross-domain, aber ich kann nicht sagen, es wird nicht funktionieren).

Gibt es die Möglichkeit, iframes zu inhärent kommunizieren mit Ihren Eltern-Fenster. Sie können die Größe der Eltern über diesen code auf Ihre iframe
```
<script>
    $(document).ready(function() {

        //access the iframe's parent in order to resize
        var contentHeight           = $('.your-iframe-wrapper').height(),
            parentBody              = window.parent.document.body;          

        $('iframe', parentBody).animate({
            height: contentHeight + 100,
            maxHeight : "100%"
        }, 200)     

    });

</script>
```
Wenn Ihr iFrame lädt, sollte es dieses Skript ausführen, und auf die iFrame parent-Fenster und ändern Sie die Größe von dort. Hoffe, dies hilft jemand aus.
- Noch kleiner code, sieht gut aus 🙂 (nicht selbst getestet). Leider funktioniert es nicht mit cross-domain-iframes, da Sie keinen Zugriff auf die Fenster.übergeordnete cross-domain. Ja, ich habe nicht gefragt, für eine domänenübergreifende Lösung als ein muss in meiner Frage, aber ich würde es brauchen. Ich update meine Frage.
InformationsquelleAutor Phillip Chan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.