layui多iframe页面控制定时器运行的方法

2023年6月11日下午1:14 • JavaScript

下面是针对“layui多iframe页面控制定时器运行的方法”的完整攻略。

1. 创建iframe页面

首先，在需要嵌入控制定时器的页面中创建iframe页面，例如：

<body>
  <div class="layui-container">
    <div class="layui-row">
      <div class="layui-col-md6">
        <iframe src="iframe.html" frameborder="0" width="100%"></iframe>
      </div>
    </div>
  </div>
</body>

其中，iframe.html为要嵌入的页面路径。

2. 在iframe页面中设置定时器

在iframe页面中设置一个定时器，例如：

<body>
  <script>
    setInterval(function(){
      console.log("定时器运行中...");
    }, 1000);
  </script>
</body>

这里设置了一个每秒运行一次的定时器，输出一段文字到控制台。

3. 通过postMessage传递消息

在接下来的示例中，我们将在父页面中控制iframe页面中的定时器运行。为了实现这一点，我们需要在父页面中使用window.postMessage()方法向iframe页面发送消息，例如：

<body>
  <div class="layui-container">
    <div class="layui-row">
      <div class="layui-col-md6">
        <iframe id="myFrame" src="iframe.html" frameborder="0" width="100%"></iframe>
      </div>
    </div>
    <div>
      <button id="startBtn" class="layui-btn">开始定时器</button>
      <button id="stopBtn" class="layui-btn">停止定时器</button>
    </div>
  </div>
  <script>
    var myFrame = document.getElementById("myFrame");

    document.getElementById("startBtn").onclick = function(){
      myFrame.contentWindow.postMessage('startTimer', '*');
    }

    document.getElementById("stopBtn").onclick = function(){
      myFrame.contentWindow.postMessage('stopTimer', '*');
    }
  </script>
</body>

这里我们在父页面中添加了两个按钮来控制定时器的运行，分别为“开始定时器”和“停止定时器”。当用户点击这两个按钮时，我们将使用postMessage()方法向iframe页面传递相应的消息。

4. 在iframe页面中接收消息并控制定时器

最后一步，我们需要在iframe页面中接收父页面发来的消息，并根据收到的消息来控制定时器的运行。具体实现代码如下：

<body>
  <script>
    var timer;

    window.addEventListener('message', function(event){
      if (event.data === 'startTimer' && !timer) {
        timer = setInterval(function(){
          console.log("定时器运行中...");
        }, 1000);
      } else if (event.data === 'stopTimer' && timer) {
        clearInterval(timer);
        timer = null;
      }
    });
  </script>
</body>

这里我们使用window.addEventListener()方法来接收父页面发来的消息。当收到“开始定时器”的消息时，我们启动定时器；当收到“停止定时器”的消息时，我们停止定时器。同时，我们使用timer变量来保存定时器的ID，以便后续控制。

至此，我们就完成了通过在父页面中控制iframe页面中定时器运行的操作。在实际开发中，我们可以根据具体情况进行灵活运用，实现各种需要控制定时器运行的场景。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：layui多iframe页面控制定时器运行的方法 - Python技术站