【js】iframe页面通信

主页面与 iframe 页面互相通讯；主页面调用 iframe 页面方法

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>index页面</title>
    <style>
      iframe {
        background-color: #ccc;
        width: 500px;
        height: 300px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div>
        <p>我是index页面</p>
        <label for="message">
          消息：
          <input id="message" type="text" placeholder="向 iframe 页面发送消息" />
          <button onclick="handleSendMessage1()">给iframe1发送</button>
          <button onclick="handleSendMessage2()">给iframe2发送</button>
          <button onclick="useIframeFunction1()">调用iframe1中的方法</button>
          <button onclick="useIframeFunction2()">调用iframe2中的方法</button>
        </label>
      </div>
      <iframe id="iframe1" src="/iframeMessage/iframe1.html" frameborder="0"></iframe>
      <iframe id="iframe2" src="/iframeMessage/iframe2.html" frameborder="0"></iframe>
    </div>
    <script>
      const iframe1Window = document.getElementById("iframe1").contentWindow;
      const iframe2Window = document.getElementById("iframe2").contentWindow;

      // 给 iframe1 发送消息
      function handleSendMessage1() {
        const message = document.getElementById("message").value;
        iframe1Window.postMessage(message, "*");
      }

      // 调用 iframe1 的方法
      function useIframeFunction1() {
        iframe1Window.handleConsole();
      }

      // 给 iframe2 发送消息
      function handleSendMessage2() {
        const message = document.getElementById("message").value;
        iframe2Window.postMessage(message, "*");
      }

      // 调用 iframe2 的方法
      function useIframeFunction2() {
        iframe2Window.handleConsole();
      }

      window.addEventListener("message", function (e) {
        // index 页面中嵌入了多个 iframe 需要知道是哪个iframe发送的消息
        if (e.source === iframe1Window) {
          console.log("index 页面接收到 iframe1 消息: ", e.data);
        } else if (e.source === iframe2Window) {
          console.log("index 页面接收到 iframe2 消息: ", e.data);
        }
      });
    </script>
  </body>
</html>

iframe1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>iframe1页面</title>
  </head>
  <body>
    <div class="wrap">
      <p>我是iframe1页面</p>
      <label for="message">
        消息：
        <input id="message" type="text" placeholder="向 index 页面发送消息" />
        <button onclick="handleSendMessage()">发送</button>
      </label>
    </div>
    <script>
      // 给 index 页面 发送消息
      function handleSendMessage() {
        const message = document.getElementById("message").value;
        window.parent.postMessage(message, "*");
      }

      // 定义一个方法，让 index 页面调用
      function handleConsole() {
        console.log("iframe1: index页面调用了我");
      }

      window.addEventListener("message", function (e) {
        console.log("iframe1 页面接收到消息: ", e.data);
      });
    </script>
  </body>
</html>

iframe2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>iframe2页面</title>
  </head>
  <body>
    <div class="wrap">
      <p>我是iframe2页面</p>
      <label for="message">
        消息：
        <input id="message" type="text" placeholder="向 index 页面发送消息" />
        <button onclick="handleSendMessage()">发送</button>
      </label>
    </div>
    <script>
      // 给 index 页面 发送消息
      function handleSendMessage() {
        const message = document.getElementById("message").value;
        window.parent.postMessage(message, "*");
      }

      // 定义一个方法，让 index 页面调用
      function handleConsole() {
        console.log("iframe2: index页面调用了我");
      }

      window.addEventListener("message", function (e) {
        console.log("iframe2 页面接收到消息: ", e.data);
      });
    </script>
  </body>
</html>