Heim >Web-Frontend >CSS-Tutorial >Wie kann ich auf berechnete Stile (z. B. Höhe und Breite) eines domänenübergreifenden IFrame-Elements zugreifen?

Wie kann ich auf berechnete Stile (z. B. Höhe und Breite) eines domänenübergreifenden IFrame-Elements zugreifen?

Susan Sarandon
Susan SarandonOriginal
2024-11-30 02:16:10671Durchsuche

How Can I Access Computed Styles (e.g., Height and Width) of a Cross-Domain IFrame Element?

Domänenübergreifender Zugriff auf berechnete Stile

Bei der Webentwicklung kann das Erhalten berechneter Stile aus domänenübergreifenden Elementen eine Herausforderung darstellen. In diesem Fall möchten Sie die berechneten Stile für Höhe und Breite eines Elements innerhalb eines Iframes aus einer anderen Domäne abrufen.

Ansatz

Zugriff auf berechnete Stile in diesem Fall Szenario berücksichtigen Sie die folgenden Ansätze:

  • window.getComputedStyle() für WebKit Browser:

    1. WebKit-Browser (wie Safari und Chrome) stellen die Methode window.getComputedStyle() bereit.
    2. Sie können sie wie folgt verwenden:

      window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height");
    3. Dies gibt den berechneten Stilwert zurück (z. B. "1196px").
  • element.currentStyle für IE:

    1. Internet Explorer verwendet die Eigenschaft element.currentStyle, um Auf berechnete Stile zugreifen.
    2. Beispiel Verwendung:

      document.getElementById("frameId").currentStyle.height;
    3. Beachten Sie, dass element.currentStyle nur explizit für das Element festgelegte Stile widerspiegelt, nicht berechnete Werte.
  • Navigieren in das DOM von iFrame:

    1. Wenn Sie auf die berechneten Stile des zugreifen müssen Sie können den Inhalt des iFrames (z. B. das HTML-Element) in das DOM des iFrames navigieren.
    2. Verwenden Sie iframeObject.contentDocument.documentElement, um auf das Stammelement des Dokuments des iFrames zuzugreifen.
    3. Sie können es dann anwenden window.getComputedStyle() oder element.currentStyle zu den entsprechenden Elementen innerhalb der Iframes DOM.

Beispiel

Mit dem von Ihnen bereitgestellten Code finden Sie hier ein Beispiel dafür, wie der höhenberechnete Stil des HTML-Codes abgerufen wird Element innerhalb des Iframes mit window.getComputedStyle():

window.getComputedStyle(document.getElementById("frameId").contentDocument.documentElement, null).getPropertyValue("height");

Additional Hinweise

  • Stellen Sie sicher, dass der Iframe über ein ID-Attribut verfügt, um die Elementauswahl zu erleichtern.
  • Die angegebenen Höhen- und Breitenwerte in Ihrem Screenshot scheinen in Pixeln angegeben zu sein, sind aber unbedingt erforderlich um ihre Einheiten in Ihrem tatsächlichen Szenario zu überprüfen.

Das obige ist der detaillierte Inhalt vonWie kann ich auf berechnete Stile (z. B. Höhe und Breite) eines domänenübergreifenden IFrame-Elements zugreifen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn