Über Button Text einfügen
Hi Leutz,
mal sehen ob ich es einigermaßen erklären kann was ich möchte.
Ich habe eine HTML Seite in der ein iFrame nachträglich an einer bestimmten Stelle eingefügt werden muss. Das stelle ich mir so vor
auf der Seite ist ein Button nach klick auf diesen geht ein Fenster auf und ich füge den iFrame ein schließe das Fenster, der iFrame wird an die benötigte Stelle eingefügt und der Button verschwindet.
ist sowas machbar mit HTML ?
Ach so was noch wichtig ist, das soll alles VOR dem hochladen passieren also Lokal auf dem Rechner. Danach (nach Einfügen des iFrames) werden die HTML Seiten erst hochgeladen. Hintergrund ist das der Benutzer ein Video einbetten muss und keine Erfahrung mit HTML hat (so wie ich löl)
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<title>text</title>
<style>
*{
margin:0;
padding:0;
}
body{
display: flex;
flex-direction: column;
padding:20px;
text-align: center;
align-items: center;
}
textarea{
width:100%;
height:100%;
margin:5px auto;
}
button{
max-width:200px;
}
#modal{
width:60vw;
height:60vh;
border:2px solid black;
display:none;
flex-direction:column;
text-align:center;
padding:10px;
background:red;
position:fixed;
transform:translate(0vw ,20vh);
outline:100vw solid rgba(0,0,0,0.8);
}
#code{
min-height:100px;
display:block;
width:60vw;
border:2px solid black;
}
</style>
</head>
<body>
<button>HTML CODE EINFÜGEN</button>
<h2>Hier wird gleich <br>dein eingefügter Code/iframe angezeigt</h1>
<div id="code"></div>
<div id="modal">
<label>Füge Texte oder HTML Code ein<br>Egebniss siehst du danach sofort</label>
<textarea><h1 style="color:red">test</h1></textarea>
<button id="save">Zeige Code an</button>
</div>
<script>
var mod=document.getElementById('modal');
document.getElementsByTagName('button')[0].addEventListener('click',function(){
mod.style.display='flex';
});
document.getElementById('save').addEventListener('click',function(){
var tex=document.getElementsByTagName('textarea')[0];
document.getElementById('code').innerHTML=tex.value;
mod.style.display='none';
});
</script>
</body>
</html>