Vernünftiges Resizing

src/components/widgets/WelcherAusweisWidget.svelte

@@ -23,6 +23,10 @@
 
 	let showVerbrauchsausweis: boolean = false
 
+	function postHeight() {
+		window.parent.postMessage(document.querySelector("html")?.offsetHeight, "*")
+	}
+
 	$: {
 		if (baujahr === "vor 1978") {
 			showVerbrauchsausweis =
@@ -35,10 +39,6 @@
 				allowedReason.includes(anlass) &&
 				allowedTypes.includes(gebaeudetyp) && (leerStand === "bis 30") && (heizungsAlter === ">= 3");
 		}
-
-		if ((gebaeudetyp || anlass || einheiten || sanierungsstatus || baujahr || heizungsAlter || leerStand) && window.parent) {
-			window.parent.postMessage(window.innerHeight, "*")
-		}
 	}
 </script>
 
@@ -53,6 +53,7 @@
 				<select
 					class="OEA_auswahl1"
 					bind:value={anlass}
+					on:change={postHeight}
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="Vermietung/Verkauf"
@@ -71,6 +72,7 @@
 				<select
 					class="OEA_auswahl1"
 					bind:value={gebaeudetyp}
+					on:change={postHeight}
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="Einfamilienhaus">Einfamilienhaus</option>
@@ -87,6 +89,7 @@
 				<select
 					class="OEA_auswahl2"
 					bind:value={sanierungsstatus}
+					on:change={postHeight}
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="saniert">saniert</option>
@@ -104,6 +107,7 @@
 				<select
 					class="OEA_auswahl2"
 					bind:value={baujahr}
+					on:change={postHeight}
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="vor 1978">vor 1978</option>
@@ -116,6 +120,7 @@
 					<select
 						class="OEA_auswahl2"
 						bind:value={heizungsAlter}
+						on:change={postHeight}
 					>
 						<option value=">= 3" selected disabled>bitte auswählen</option>
 						<option value="< 3">jünger als 3 Jahre</option>
@@ -128,6 +133,7 @@
 				<select
 					class="OEA_auswahl2"
 					bind:value={einheiten}
+					on:change={postHeight}
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="bis 4 Wohneinheiten"
@@ -144,6 +150,7 @@
 				<select
 					class="OEA_auswahl2"
 					bind:value={leerStand}
+					on:change={postHeight}
 				>
 					<option value="bis 30" selected disabled>bitte auswählen</option>
 					<option value="bis 30"
@@ -161,7 +168,6 @@
 			{#if showVerbrauchsausweis}
 				<div
 					class="OEA_item6 result"
-					transition:fade={{ duration: 1000 }}
 				>
 				<WidgetCardTemplate
 					name="Verbrauchsausweis Wohngebäude"
@@ -184,7 +190,6 @@
 			{#if allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)}
 				<div
 					class="OEA_item6 result"
-					transition:fade={{ duration: 1000 }}
 				>
 				<WidgetCardTemplate
 					name="Bedarfsausweis Wohngebäude"
@@ -207,7 +212,6 @@
 			{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
 				<div
 					class="OEA_item6 result"
-					transition:fade={{ duration: 1000 }}
 				>
 				<WidgetCardTemplate
 					name="Verbrauchsausweis Gewerbe"
@@ -231,7 +235,6 @@
 			{#if allowedReason.includes(anlass) == false && allowedTypesGewerbe.includes(gebaeudetyp)}
 				<div
 					class="OEA_item6 result"
-					transition:fade={{ duration: 1000 }}
 				>
 				<WidgetCardTemplate
 					name="GEG-Nachweis Gewerbe"
@@ -255,7 +258,6 @@
 			{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
 				<div
 					class="OEA_item6 result"
-					transition:fade={{ duration: 1000 }}
 				>
 				<WidgetCardTemplate
 					name="Bedarfsausweis Gewerbe"

src/pages/index.astro

@@ -18,8 +18,19 @@ import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.
 		 <h2>Machen Sie hier den <span>online Check</span> welcher Energieausweis der Richtige für Sie ist:</h2>
 	 
 		 
-	<WelcherAusweisWidget client:load/>
-	
+		<iframe src="/widgets/immowelt" id="ibc-iframe" style="width: 100%; border: none;"></iframe>
+
+		<script defer async>
+				const iframe = document.getElementById("ibc-iframe");
+
+				window.addEventListener("message", event => {
+						if (event.source !== iframe.contentWindow) {
+								return;
+						}
+
+						iframe.style.height = event.data + "px"
+				});
+		</script>
 
 	
 	<h2>Erfüllen Sie die gesetzlichen Vorgaben des <span>GEG 2024</span>. Mit uns profitieren Sie von:</h2>