title: How to embed a website in javascript without an iframe?
body: <p><strong>I am trying to make a Website that has IE and Opera compatibility.</strong>
  <br>
  For Those browsers, iframes are not allowed. According to Opera Browser Wiki,</p>
  <blockquote>
  <p>&quot;...Only normal HTML5 and JS is allowed on Opera Browser and IE, Therefore no iFrames are allowed on here&quot;</p>
  </blockquote>
  <br>
  I have a section of my website that is an iframe. Here is my code.
  <br>
  <br>
  <p><strong>Style.css</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&amp;display=swap');
  *{
    font-family: sans-serif;
  }
  #header{
    background: #711495;
  background: -webkit-linear-gradient(bottom right, #711495, #D63A85);
  background: -moz-linear-gradient(bottom right, #9336b7, #D63A85);
  background: linear-gradient(to top left, #711495, #d33a84);
    color:white;
    padding-bottom:50px;
    padding-top: 35px;
    padding-left: 25px;
    padding-right: 30px;
    text-align: center;
  }
  .card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 50%;
    text-align: center;
  }
  
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  
  .container {
    padding: 2px 16px;
  }
  /*Info Colors*/
  .white{color: white;}
  .green{color: #21d900;}
  .red{color:#f02222;}
  .blue{color: lightskyblue;}
  .black{color:#797979;}
  /*End*/
  td{
    width: 10%;
  }
  body {
    margin: 0;
  }
  .parent {
    display: table;
    width: 100%;
    height: 40px;
  }
  #left, #right {
    display: table-cell;
    vertical-align: top;
    width: 45%;
    height: 100%;
    text-align: center;
    border:solid;
    border-color: rgba(0,0,0,0.2);
    padding:10px;
    border-width: thin;
  }
  .Bordermap{
    border:solid;
    border-width: thin;
    border-color: rgba(0,0,0,0.2);
    text-align: center;
  }
  .a{
    background-color: #3695f4;
    color: white;
    padding:10px;
    margin-bottom: 10px;
    text-decoration: none;
    margin-left:2.25px;
    font-size: 20px;
  }
  .a:hover{
    background-color: #f79800;
  }
  .rajscape{
    background-color: none!important;
  }
  .hei{
    background-size: 50%;
  }
  .oddaout{
    background-color: none!important;
  }
  .nope_nothing_at_all{
    color: white;
    padding:10px 10px 10px 0px !important;
    margin-bottom: 10px;
    text-decoration: underline;
    font-size: 15px !important;
  }
  .ok{
    background-color: none!important;
  }
  #darK{
    background-color: black!important;  
  }
  .header-dark{
    background-color:#393939;
    
    color:white;
    padding-bottom:50px;
    padding-top: 35px;
    padding-left: 25px;
    padding-right: 30px;
    
  }
  .dark{
    color: aliceblue;
    background-color: #292929;
  }
  .full{
    background-color: #3695f4;
    color: white;
    padding:10px;
    margin-bottom: 10px;
    text-decoration: none;
    margin-left:2.25px;
    font-size: 20px;
    position: fixed;
    z-index: 5;
  }
  .margin-left{
    margin-left: 175px;
  }
  #top-link-area{
    background-color: aliceblue;
    z-index: 3;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;The New COVID-19 Tracker&lt;/title&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;script data-ad-client="ca-pub-4436265437354189" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins"&gt;
  &lt;style&gt;
    #embeddev{
      margin: 30px;
    }
    .qwerty {
          font-family: 'Poppins', serif;
          color:white;
        }
    .sidebar { 
              height: 100%; 
              width: 0; 
              position: fixed; 
              /*Stays in place */ 
              background-color: #303630; 
              /*Grey*/ 
              overflow-x: hidden; 
        color:white;
        z-index: 12;
              /*for Disabling horizontal scroll */ 
          } 
          /* Position and style for the sidebar links */ 
          
          .sidebar a { 
              padding: 10px 10px 10px; 
              font-size: 25px; 
              color: #ffffff; 
              display: block; 
              transition: 0.3s; 
          } 
          /* the links change color when mouse hovers upon them*/ 
          
          .sidebar a:hover { 
              color: #ffffff; 
          } 
          /* Position and style the for cross button */ 
          
          .sidebar .closebtn { 
              position: absolute; 
              top: 0; 
              right: 25px; 
          } 
          /* Style for the sidebar button */ 
          
          .openbtn { 
              font-size: 25px; 
              background-color: #000000; 
              color: #ffffff; 
              padding: 10px 10px 10px; 
              border: none;
        position: fixed;
        z-index: 12;
          } 
          /* the sidebar button changes 
      color when mouse hovers upon it */ 
  .openbtn:hover { 
  color: #FFFFFF; 
  } 
  
      /* pushes the page content to the right 
      when you open the side navigation */ 
          
          #main { 
              transition: margin-left .5s; 
              /* If you want a transition effect */ 
              padding: 10px; 
          }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="sidebar" class="sidebar"&gt;
  &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;
  ×
  &lt;/a&gt;
  
  &lt;a href="spread.html"&gt;Stay Safe&lt;/a&gt;
  &lt;a href="index.html"&gt;Home&lt;/a&gt;
  &lt;a href="#map"&gt;Map Beta&lt;/a&gt;
  &lt;a href="darkmode.html"&gt;Dark Mode Lite&lt;/a&gt;
  &lt;a href="intern.html"&gt;NEW! Continents!&lt;/a&gt;
  &lt;a href="#embeddev"&gt;Developer&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="main"&gt;
  &lt;button class="openbtn" onclick="openNav()"&gt;
  Links
  &lt;/button&gt;
  
  &lt;/div&gt;
  &lt;script&gt; 
      /* Sets the width of the sidebar 
      to 250 and the left margin of the 
      page content to 250 */ 
      function openNav() { 
          document.getElementById( 
          "sidebar").style.width = "250px"; 
          document.getElementById( 
          "main").style.marginLeft = "250px"; 
      } 
  
      /* Set the width of the sidebar 
      to 0 and the left margin of the 
      page content to 0 */ 
      function closeNav() { 
          document.getElementById( 
          "sidebar").style.width = "0"; 
          document.getElementById( 
          "main").style.marginLeft = "0"; 
      } 
  &lt;/script&gt;
  &lt;div id="header"&gt;
  &lt;h1 class="qwerty"&gt;New Coronavirus Tracker&lt;/h1&gt;
  &lt;h3 class="qwerty"&gt;This Is Where You Can Get All COVID -19 Info
  &lt;/h3&gt;
  &lt;h4&gt;NEW USA Stats at bottom of this page!&lt;/h4&gt;
  &lt;h3&gt;SHARE THIS PAGE
  &lt;a href="linkshare.html" target="_blank" class="oddaout"&gt;&lt;img src="https://image.flaticon.com/icons/png/512/2089/2089782.png" height = 30px&gt;&lt;/a&gt;&lt;/h3&gt;
  &lt;/div&gt;&lt;br&gt;
  
  
  &lt;script src="https://apps.elfsight.com/p/platform.js" defer&gt;&lt;/script&gt;
  &lt;div class="elfsight-app-b64cfd63-38a6-4b27-8877-f176e60af02d"&gt;&lt;/div&gt;
  
  &lt;script src="https://apps.elfsight.com/p/platform.js" defer&gt;&lt;/script&gt;
  &lt;div class="elfsight-app-eb4a860e-edf5-45a1-9348-f7e008012ac6"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;br&gt;
  &lt;h1&gt;NEW! USA stats&lt;/h1&gt;
  &lt;iframe src="https://apps.elfsight.com/p/platform.js"&gt;
  &lt;iframe class="elfsight-app-badbbef6-f719-4652-8b9b-c87b9df7ec1d"&gt;
  &lt;br&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>