datawrapper chart, more specific query of iframe

src/components/DatawrapperChart/DatawrapperChart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
   import type { ContainerWidth } from '../@types/global';
   /**
@@ -52,11 +52,11 @@
    */
   export let textWidth: ContainerWidth | null = null;
 
-  onMount(() => {
+  let frameElement;
-    if (typeof window !== 'undefined') {
+
-      window.addEventListener('message', function (e) {
+  $: frameFiller = (e) => {
     if (void 0 !== e.data['datawrapper-height']) {
-          const t = document.querySelectorAll('iframe');
+      const t = [frameElement];
       for (const a in e.data['datawrapper-height']) {
         for (let r = 0; r < t.length; r++) {
           if (t[r].contentWindow === e.source) {
@@ -65,9 +65,18 @@
         }
       }
     }
-      });
+  }
+
+  onMount(() => {
+    if (typeof window !== 'undefined') {
+      window.addEventListener('message', frameFiller);
     }
   });
+  onDestroy(() => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('message', frameFiller);
+    }
+  })
 </script>
 
 <GraphicBlock {width} {textWidth} {title} {description} {notes}>
@@ -78,6 +87,7 @@
 
   <div class="datawrapper-chart">
     <iframe
+      bind:this={frameElement}
       title="{frameTitle}"
       aria-label="{ariaLabel}"
       id="{id}"