Beispiel:Iframe-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<title>Live HTML-Vorschau mit JS und CSS</title>
<style>
body {
font-family: sans-serif;
}
textarea {
width: 100%;
height: 200px;
}
iframe {
width: 100%;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Schreib Dein eigenes HTML, CSS & JavaScript!</h1>
<textarea id="editor">
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: lightyellow; color: #337599; font-family: sans-serif; }
h1 { text-align: center; }
</style>
</head>
<body>
<h1>Hello!</h1>
<button onclick="alert('Du hast den Button im iframe angeklickt!')">Klick mich!</button>
</body>
</html>
</textarea>
<h2>Vorschau:</h2>
<iframe id="preview" ></iframe>
<script>
const editor = document.getElementById("editor");
const preview = document.getElementById("preview");
function updatePreview() {
preview.srcdoc = editor.value;
}
editor.addEventListener("input", updatePreview);
// Initial render
updatePreview();
</script>
</body>
</html>
