Archiv-Modus von Basti1012 Lösungspage

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! <img class="vorschau" src="image/iframe-vorschau.png" alt="bild">

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>

basti1012.bplaced.net

Mehrere Websiten in eine einbinden.

Code