Untitled

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Master</title>
  <style>
    * {
      -webkit-box-sizing: border-box;
      -webkit-backface-visibility: hidden;
      -webkit-transition: translate3d(0, 0, 0)
    }
   HTML,
    BODY {
      width: 1920px;
      height: 1080px;
      background-color: transparent;
      overflow: hidden;
    }

    #iframeOne {
      border: none;
      width: 1920px;
      height: 1080px;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 2;
      opacity: 1;
      transition: opacity 1s;
    }

    #iframeTwo {
      border: none;
      position: absolute;
      width: 1920px;
      height: 1080px;
      top: 0px;
      left: 0px;
      z-index: 1;
      opacity: 0;
      transition: opacity 1s;
    }

    #iframeOne.fade {
      opacity: 0;
    }

    #iframeTwo.fade {
      opacity: 1;
    }
</style>
</head>

<body>
  <iframe id="iframeOne" src="firstpage.php"></iframe>
  <iframe id="iframeTwo"></iframe>

  <script type="text/javascript">
    var swapNumber = 2;

    function swap(newUrl) {

      if (swapNumber == 1) {
        document.getElementById('iframeOne').src = newUrl;
        dissolve();
        swapNumber = 2;

      } else if (swapNumber == 2) {
        document.getElementById('iframeTwo').src = newUrl;
        dissolve();
        swapNumber = 1;
      }

      function dissolve() {
        iframeOne.classList.toggle('fade');
        iframeTwo.classList.toggle('fade');
      }
    }
  </script>
</body>

</html>