Mehrere Websiten in eine einbinden.
Hallo,
ich möchte gerne auf meiner Website mehrere Websites einbinden.
(Siehe Foto) wenn ich links auf den Link(mit "1" markiert) klicke, sollte in dem (schlecht gezeichnetem) Viereck eine bestimmte Website erscheinen.
Das Gleiche soll passieren, wenn ich den anderen (mit "2" markiert) anklicke, vorher soll der Bereich so wie er jetzt ist aussehen, und sich wie gesagt immer die beliebige Website einblenden. Ich habe leider keinen Weg gefunden und bräuchte dringen Hilfe! Vielen Dank schon mal im Voraus!
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<style>
*{
margin:0;
padding:0;
}
main,body{
display:flex;
height:100vh;
width:100%;
}
#left{
width:200px;
display:flex;
flex-direction:column;
}
#left .buttons{
height:25%;
}
iframe{
height:100%;
width:calc(100% - 200px);
border:none;
}
.soforthilfe{
background-image:url(https://soforthilfe-forum.de/apple-icon-114x114.png);
}
.htmlseminar{
background-image:url(https://www.html-seminar.de/forum/ws/images/apple-touch-icon.png);
}
.selfhtml{
background-image:url(https://wiki.selfhtml.org/skins/Selfhtml/images/favicon2.ico);
}
.codepen{
background-image:url(https://i2.wp.com/assets.codepen.io/internal/avatars/users/default.png?ssl=1);
}
#loader{
border:1px solid black;
position:fixed;
top:calc(100vh - 50px - 50vh);
left:calc(100vw - 50px - 50vw);
z-index:55;
display:none;
flex-wrap:wrap;
width:99px;
height:99px;
animation:rotate 1.3s cubic-bezier(.23,1.16,0,.99) forwards infinite;
}
@keyframes rotate{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
.sk-cube {
background-size:99px;
width: 33px;
height: 33px;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1 {
animation-delay: 0.2s;
}
.sk-cube-grid .sk-cube2 {
animation-delay: 0.3s;
}
.sk-cube-grid .sk-cube3 {
animation-delay: 0.4s;
}
.sk-cube-grid .sk-cube4 {
animation-delay: 0.1s;
}
.sk-cube-grid .sk-cube5 {
animation-delay: 0.2s;
}
.sk-cube-grid .sk-cube6 {
animation-delay: 0.3s;
}
.sk-cube-grid .sk-cube7 {
animation-delay: 0s;
}
.sk-cube-grid .sk-cube8 {
animation-delay: 0.1s;
}
.sk-cube-grid .sk-cube9 {
animation-delay: 0.2s;
}
@keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
transform: scale3D(1, 1, 1);
} 35% {
transform: scale3D(0, 0, 1);
}
}
#loader1{
background-position:0 0;
}
#loader2{
background-position:66px 0;
}
#loader3{
background-position:33px 0;
}
#loader4{
background-position:0px 66px;
}
#loader5{
background-position:66px 66px;
}
#loader6{
background-position:33px 66px;
}
#loader7{
background-position:0px 33px;
}
#loader8{
background-position:66px 33px;
}
#loader9{
background-position:33px 33px;
}
</style>
</head>
<body>
<div id="loader" class="sk-cube-grid">
<div id="loader1" class="sk-cube sk-cube1"></div>
<div id="loader2" class="sk-cube sk-cube2"></div>
<div id="loader3" class="sk-cube sk-cube3"></div>
<div id="loader4" class="sk-cube sk-cube4"></div>
<div id="loader5" class="sk-cube sk-cube5"></div>
<div id="loader6" class="sk-cube sk-cube6"></div>
<div id="loader7" class="sk-cube sk-cube7"></div>
<div id="loader8" class="sk-cube sk-cube8"></div>
<div id="loader9" class="sk-cube sk-cube9"></div>
</div>
<main>
<div id="left">
<input type="button" id="f2" value="https://html-seminar.de" class="buttons" data-loader="htmlseminar">
<input type="button" id="f3" value="https://wiki.selfhtml.org/" class="buttons" data-loader="selfhtml">
<input type="button" id="f4" value="https://codepen.io" class="buttons" data-loader="codepen">
<input type="button" id="f1" value="https://soforthilfe-forum.de" class="buttons" data-loader="soforthilfe">
</div>
<iframe class="f1" src=""></iframe>
</main>
<script>
but=document.querySelectorAll('.buttons');
var loa=document.getElementById('loader');
var loade=document.querySelectorAll('#loader div');
but.forEach(function(d){
d.addEventListener('click',function(){
const val=d.value;
loa.style.display='flex';
bildlink=d.getAttribute('data-loader')
loade.forEach(function(y,c){
console.log(c)
cla='sk-cube sk-cube'+parseInt(c+1);
y.setAttribute('class',bildlink+' '+cla)
})
ifr=document.querySelector('iframe');
ifr.src=val;
ifr.addEventListener('load',function(){
loa.style.display='none';
})
})
})
</script>
</body>
</html>