Question

在信息屏幕上，我想在不同的页面之间切换，并希望它们平滑地溶解。我的想法是拥有两个iframe。显示一个iframe>通过发送“ swap（'anotherpage.php'）”更改第二个iframe的内容，并通过切换iframe的不透明度进行转换。

我当前的代码工作正常，但是如果延迟获取新页面，则溶解将不顺利。我如何确定新页面在溶解之前已完全加载？也许我的方法是错误的？

<!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>

Answer 1

您可以使用事件监听器来监听iFrame的onLoad事件，如下所示：

iframeEl.addEventListener('load', function() {
    // Do whatever you like
}, true);

如何使用iframe更改页面上的内容并使其平滑溶解？

1 个答案: