Erfahren Sie, wie Sie Bildlaufleistenstile in Iframe-Tags erstellen und in die Verwendung von Iframe-Tags einführen

In diesem Artikel geht es hauptsächlich um Scroll-Probleme in HTML-Iframe-Tags und um die Lösung von Problemen wie doppelten Scroll-Balken nach dem Laden von Iframes mit dynamischen Höhen

Betrachten wir zunächst die Entfernung und Beibehaltung der Bildlaufleisten im HTML-Iframe-Tag:

Nachdem der Iframe in die Seite eingebettet wurde, ist dies manchmal der Fall B. alle Bildlaufleisten entfernen, die rechte Bildlaufleiste entfernen und die untere Bildlaufleiste behalten, die untere Bildlaufleiste entfernen und die rechte Bildlaufleiste behalten. Was sollen wir also tun?

Erstens: Alle Bildlaufleisten entfernen

Die erste Methode: iframe hat ein Bildlaufattribut, das drei Werte hat: auto, ja und nein.

Bildlauf: automatisch -----Bildlaufleiste erscheint bei Bedarf

Bildlauf: ja ------Bildlaufleiste immer anzeigen

Bildlauf: nein - -- ----Bildlaufleisten immer ausblenden

Wenn Scrollen: Nein eingestellt ist, werden alle Bildlaufleisten ausgeblendet.

Zweite Methode: Ich habe festgestellt, dass es zusätzlich zum Scrollen zum Entfernen aller Bildlaufleisten eine andere Methode gibt, mit der die Bildlaufleisten durch Festlegen von body{overflow:hidden} entfernt werden können Eigenschaft, die verwendet wird, wenn wir nur eine bestimmte Bildlaufleiste entfernen möchten.

Zweitens: Entfernen Sie die rechte Bildlaufleiste und behalten Sie die untere Bildlaufleiste bei

Wenn Sie nur die untere Bildlaufleiste beibehalten möchten, können Sie den Körper{ im festlegen eingebetteter Seitenüberlauf-x: automatisch; Überlauf-y: ausgeblendet; Seitenkörper{overflow-x: versteckt; overflow-y: auto;}

Wir wissen bereits, dass diese beiden Eigenschaften die Anzeige und das Ausblenden der Bildlaufleiste festlegen können. Wenn also beide Eigenschaften gleichzeitig festgelegt werden, Welches wird erscheinen? Was ist der Effekt? Durch die Erkennung habe ich herausgefunden, dass beim Scrollen = „Auto“ oder „Ja“ die Einstellungen im Text verwendet werden, wenn beim Scrollen = „Nein“ eingestellt ist Im Hauptteil wird die Bildlaufeinstellung verwendet, d. h. alle Bildlaufleisten werden entfernt.

Als nächstes sprechen wir darüber, wie man die horizontale Bildlaufleiste entfernt:

Sie kann mit der folgenden Methode entfernt werden:

In der enthaltenen Webseite Fügen Sie im Iframe

<style>
html { overflow-x:hidden; }
</style>

hinzu, um die horizontale Bildlaufleiste zu entfernen, und Sie können die gleiche Methode auch verwenden, um die vertikale Bildlaufleiste zu entfernen.

Lösen Sie das Problem der doppelten Bildlaufleisten nach dem Laden eines Iframes mit dynamischer Höhe:

Wenn die Iframe-Daten asynchron über Ajax geladen werden, beträgt die Höhe des darin enthaltenen Div Auch hier liegt ein Problem vor. Wenn der Inhalt im Div nicht geladen wird, kann die Höhe der Variable nach dem Laden noch nicht abgerufen werden Alle Dokumentbäume werden vor dem Laden geladen. Die Methode zum Ermitteln der tatsächlichen Höhe

Die ultimative Version, geschrieben auf der Iframe-Seite

var ht = setInterval('getHeight',100);
function getHeight(){
    if(document.readyState == 'complete'){
        var height = (document.body.scrollHeight)+'px';
        $('parentdiv',window.parent.document).css('height',height);
        window.clearInterval(gh);
    }
}

Es gibt möglicherweise eine einfachere Lösung, aber das ist die Idee und Code, auf den ich gestoßen bin und den ich Schritt für Schritt gelöst habe. Es lohnt sich, ihn aufzuzeichnen. Natürlich kann das Scroll-Attribut auch verwendet werden. Wenn Sie einfache Methoden haben, können Sie unten gerne eine Nachricht hinterlassen

Wie schreibe ich einen relativen Pfad für das Basis-Tag in HTML? (Nutzungsanweisungen enthalten)

Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (mit Beispielen)

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie Bildlaufleistenstile in Iframe-Tags erstellen und in die Verwendung von Iframe-Tags einführen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!