<iframe id="jsoncrackEmbed" src="https://jsoncrack.com/widget"></iframe>
<script>
const jsonCrackEmbed = document.querySelector("iframe");
const json = JSON.stringify({
"section": "It loaded!"
});
window?.addEventListener("message", (event) => {
jsonCrackEmbed.contentWindow.postMessage({
json
}, "*");
});
</script>
body {
margin: 0;
padding: 0;
}
section {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
textarea {
width: 100%;
height: 100%;
}
div {
display: flex;
width: 100%;
height: 150px;
}
#jsoncrackEmbed {
flex: 1;
order: 2;
border: none;
width: 100%;
height: 100vh;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.