Wie kann ich die Größe eines iFrames dynamisch an die Höhe seines Inhalts anpassen?

Ändern der iFrame-Höhe, um sie dynamisch an die Inhaltshöhe anzupassen

Frage: Wie kann ich die Höhe eines iFrames dynamisch festlegen? um die Höhe des Inhalts anzupassen, sodass keine Bildlaufleiste erforderlich ist?

Antwort:

Während bei herkömmlichen JavaScript-Methoden möglicherweise Zugriffsverweigerungsfehler auftreten, ist eine Lösung mit direkter Kommunikation erforderlich zwischen dem Iframe und seiner übergeordneten Seite kann eingesetzt werden.

Implementierung:

1. Trigger von iFrame-Seite:

   • Fügen Sie im Hauptteil der iFrame-Seite einen Onload-Trigger hinzu, der die Höhe des Hauptteils mithilfe von window.onload an die übergeordnete Seite weitergibt.

2. Größe ändern Funktion auf der übergeordneten Seite:

   • Erstellen Sie auf der übergeordneten Seite eine JavaScript-Funktion namens resizeIframe, die die neue Höhe als Argument verwendet.
   • Passen Sie die Höhe des Iframes an Passen Sie die neue Höhe an und fügen Sie einen leichten Versatz hinzu, um etwaige Polsterungen oder Elemente außerhalb des Körpers unterzubringen.

3. Integration:

   • Verstecken Sie zunächst den iFrame und zeigen Sie ein Ladebild an.
   • Wenn die Funktion „ResizeIframe“ ausgeführt wird, blenden Sie das Ladebild aus und zeigen Sie den iFrame für ein nahtloses Erscheinungsbild an.

Einschränkungen:

Diese Methode basiert auf der Kommunikation in derselben Domäne. Wenn der iFrame von einer anderen Domain stammt, kann ein Proxy-PHP-Skript oder eine direkte Integration des RSS-Feeds des Blogs in die übergeordnete Seite erforderlich sein.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe eines iFrames dynamisch an die Höhe seines Inhalts anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!