Spaces:
Runtime error
Runtime error
File size: 1,603 Bytes
2492536 fe1089d 2492536 ad3c909 940d70a ad3c909 fe1089d 940d70a 2492536 940d70a 2492536 940d70a 2492536 940d70a 2492536 940d70a fe1089d 940d70a fe1089d 2492536 940d70a fe1089d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
# HTML component that implements custom iFrame
<script lang="ts">
import { createEventDispatcher } from "svelte";
export let elem_classes: string[] = [];
export let value: string;
export let visible = true;
export let min_height = false;
# default setting height and width
export let height = "100%";
export let width = "100%";
const dispatch = createEventDispatcher<{ change: undefined }>();
let iframeElement;
# custom function to update iFrame height on load of HTML
const onLoad = () => {
try {
# calling iFrame document
const iframeDocument = iframeElement.contentDocument || iframeElement.contentWindow.document;
# if heigth not custom, setting height individually
if (height === "100%") {
# grabbing height from iFrame document
const height = iframeDocument.documentElement.scrollHeight;
iframeElement.style.height = `${height}px`;
}
} catch (e) {
console.error("Error accessing iframe content:", e);
}
};
$: value, dispatch("change");
</script>
<div
class="prose {elem_classes.join(' ')}"
class:min={min_height}
class:hide={!visible}
class:height={height}
>
# updated to use Iframe instead of HTML, using string values with srcdoc
<iframe
bind:this={iframeElement}
title="iframe component"
width={width}
srcdoc={value}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
on:load={onLoad}
></iframe>
</div>
<style>
.min {
min-height: var(--size-24);
}
.hide {
display: none;
}
</style>
|