Wie man die Höhe des Inhalts des Objekt-Tags abruft

Question

Ich muss nur die Höhe des Inhalts eines Objekt-Tags bekommen, wenn davon ausgegangen wird, dass das Objekt eine Webseite ist (auf derselben Seite).

Ich schätze jede Hilfe im Voraus.

Danke Leute! Ich weiß, es gibt einen Weg, es zu tun.

BEARBEITEN

Ich möchte die Höhe von index.php im vorherigen Beispiel erhalten, nicht die Höhe von ".blog-stuff".

$(".blog-stuff").height() // gibt nicht zurück, was ich brauche.

BEARBEITEN BEARBEITEN

Ich versuche, die Höhe der Webseite im Objekt-Tag zu erfassen und auf den Objekt-Tag anzuwenden. Dadurch würde die Größe des Objekts erhöht, um die gesamte Webseite anzuzeigen, die es enthält, anstatt Scrollleisten zu verwenden. Das Überlaufen funktioniert nicht wie geplant.
Dieser Screenshot zeigt nur das Objekt mit der Webseite darin

Entschuldigung für die Verwirrung, Leute.

Answer 1

Greifen Sie auf den Inhalt von Objekt zu

Die eigentliche Herausforderung scheint darin zu liegen, wie man auf den Inhalt des Objektelements zugreifen kann. Die Lösung, die ich gefunden habe, besteht darin, die Eigenschaft contentDocument des object-Elements zu verwenden. Ich habe einen kleinen Testfall zusammengestellt, in dem Sie die Höhe des object-Inhalts protokollieren.

document.getElementById("object_id").contentDocument.body

Stellen Sie sicher, dass der Inhalt des object-Elements geladen ist, bevor Sie versuchen, auf seine Höhe zuzugreifen.

Höhe protokollieren

    $("#button").click(function() {
         console.log(document.getElementById("test").contentDocument.body.getBoundingClientRect().height)
    });

Sie werden jedoch auf ein Problem stoßen, wenn Sie versuchen, eine externe URL in Ihr Objekt zu laden. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript

---

Dann gibt es einige verschiedene Methoden, um die Höhe eines HTML-Elements zu erhalten.

Reine JavaScript-Optionen:

element.style.height

document.getElementById("input_id_here").style.height;

Beschreibung:

Die Höhen-CSS-Eigenschaft legt die Höhe des Inhaltsbereichs eines Elements fest. Der Inhaltsbereich befindet sich innerhalb der Polsterung, des Rahmens und der Marge des Elements.

https://developer.mozilla.org/en-US/docs/Web/CSS/height

element.getBoundingClientRect().height

element.getBoundingClientRect().height

Beschreibung:

Gibt ein Textrechteckobjekt zurück, das eine Gruppe von Textrechtecken einschließt.

https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

element.clientHeight

element.clientHeight;

Beschreibung:

Gibt die innere Höhe eines Elements in Pixeln zurück, einschließlich der Polsterung, jedoch nicht der horizontalen Scrollbar-Höhe, des Rahmens oder der Marge.

clientHeight kann wie folgt berechnet werden: CSS-Höhe + CSS-Polsterung - Höhe der horizontalen Scrollleiste (falls vorhanden).

https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

HTMLelement.offsetHeight

document.getElementById("input_id_here").offsetHeight;

Beschreibung:

Höhe eines Elements relativ zum offsetParent des Elements.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

jQuery-Optionen

*height("input_selector_here")*

$("input_selector_here").height()

Beschreibung:

Rufen Sie die aktuelle berechnete Höhe für das erste Element in der Übereinstimmungsmenge von Elementen ab.

https://api.jquery.com/height/

outerHeight()

$("input_selector_here").outerHeight()

Beschreibung:

Rufen Sie die aktuelle berechnete Höhe für das erste Element in der Übereinstimmungsmenge von Elementen ab, einschließlich Polsterung, Rahmen und optionaler Marge. Gibt eine Zahl (ohne "px")-Darstellung des Werts zurück oder null, wenn es auf eine leere Menge von Elementen aufgerufen wird.

https://api.jquery.com/outerHeight/

innerHeight()

$("input_selector_here").innerHeight()

Beschreibung:

Rufen Sie die aktuelle berechnete Höhe für das erste Element in der Übereinstimmungsmenge von Elementen ab, einschließlich der Polsterung, jedoch nicht des Rahmens.

https://api.jquery.com/innerHeight/

Answer 2

Ich mag kein jQuery, deshalb wird meine Antwort reinen JavaScript verwenden....

document.getElementById('your-object-id').getBoundingClientRect().height;

Answer 3

document.getElementsById("object").style.height

Dies sollte die schnellste Lösung sein, da sie nicht auf einen zusätzlichen Funktionsaufruf wie die anderen jQuery-Lösungen angewiesen ist.