iframe内嵌页面双向通信

父页面

复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>父页面</title>
</head>
<body>
  <h1>父页面</h1>
  <iframe id="childIframe" src="http://child.com/child.html" width="400" height="300"></iframe>

  <script>
    // 步骤1：获取iframe的window对象（需等iframe加载完成）
    const iframe = document.getElementById('childIframe');
    let childWindow;

    // 监听iframe加载完成
    iframe.addEventListener('load', () => {
      childWindow = iframe.contentWindow;
      console.log('iframe加载完成，可通信');
    });

    // 步骤2：监听来自iframe的消息，并派发内部自定义事件
    window.addEventListener('message', (e) => {
      // 安全校验：只接收指定域名的消息（防止恶意注入）
      if (e.origin !== 'http://child.com') return;

      console.log('父页面收到iframe消息：', e.data);

      // 派发内部自定义事件，让其他逻辑响应（解耦）
      const childMsgEvent = new CustomEvent('iframe-message', {
        detail: e.data,
        bubbles: true
      });
      document.dispatchEvent(childMsgEvent);
    });

    // 步骤3：监听内部自定义事件（业务逻辑响应）
    document.addEventListener('iframe-message', (e) => {
      console.log('父页面业务逻辑响应：', e.detail);
      // 示例：更新页面内容
      document.body.insertAdjacentHTML('beforeend', `<p>收到iframe消息：${JSON.stringify(e.detail)}</p>`);
    });

    // 步骤4：向iframe发送消息（示例：点击按钮发送）
    const sendBtn = document.createElement('button');
    sendBtn.textContent = '向iframe发送消息';
    sendBtn.addEventListener('click', () => {
      if (!childWindow) return alert('iframe未加载完成');
      // 发送消息：参数1=消息内容，参数2=目标域名（*表示任意，生产环境建议指定）
      childWindow.postMessage({ type: 'parent-msg', content: '父页面的问候' }, 'http://child.com');
    });
    document.body.appendChild(sendBtn);
  </script>
</body>
</html>

子页面

复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>iframe子页面</title>
</head>
<body>
  <h2>iframe子页面</h2>

  <script>
    // 步骤1：监听来自父页面的消息，并派发内部自定义事件
    window.addEventListener('message', (e) => {
      // 安全校验：只接收父页面域名的消息
      if (e.origin !== 'http://parent.com') return;

      console.log('iframe收到父页面消息：', e.data);

      // 派发内部自定义事件，解耦业务逻辑
      const parentMsgEvent = new CustomEvent('parent-message', {
        detail: e.data,
        bubbles: true
      });
      document.dispatchEvent(parentMsgEvent);
    });

    // 步骤2：监听内部自定义事件（业务逻辑响应）
    document.addEventListener('parent-message', (e) => {
      console.log('iframe业务逻辑响应：', e.detail);
      // 示例：更新页面内容
      document.body.insertAdjacentHTML('beforeend', `<p>收到父页面消息：${JSON.stringify(e.detail)}</p>`);
    });

    // 步骤3：向父页面发送消息（示例：点击按钮发送）
    const sendBtn = document.createElement('button');
    sendBtn.textContent = '向父页面发送消息';
    sendBtn.addEventListener('click', () => {
      // window.parent 指向父页面的window对象
      window.parent.postMessage({ type: 'child-msg', content: 'iframe的回复' }, 'http://parent.com');
    });
    document.body.appendChild(sendBtn);
  </script>
</body>
</html>

nginx配置

复制代码

# Nginx 核心配置
worker_processes  1; # Windows 下建议设为1

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    # 关闭 sendfile（Windows 下兼容性更好）
    sendfile        off;
    # 连接超时配置
    keepalive_timeout  65;

    # 父页面站点配置：parent.com
    server {
        listen       80; # 监听80端口
        server_name  parent.com; # 域名匹配

        # 字符编码（防止中文乱码）
        charset utf-8;

        # 根目录：父页面所在文件夹
        root   C:\Users\user\Desktop\iframe内嵌页面通信;
        # 默认索引页（访问 parent.com 直接打开 parent.html）
        index  parent.html index.html index.htm;

        # 访问日志（可选，便于排查问题）
        access_log  logs/parent.access.log;
        error_log   logs/parent.error.log;

        # 匹配 parent.html 的访问规则
        location = /parent.html {
            try_files $uri =404; # 确保文件存在才返回
        }
    }

    # 子页面站点配置：child.com
    server {
        listen       80;
        server_name  child.com;

        charset utf-8;

        # 根目录和父页面同文件夹（因为两个html在同一目录）
        root   C:\Users\user\Desktop\iframe内嵌页面通信;
        index  child.html index.html index.htm;

        access_log  logs/child.access.log;
        error_log   logs/child.error.log;

        location = /child.html {
            try_files $uri =404;
        }
    }
}

host配置

复制代码

127.0.0.1 parent.com
127.0.0.1 child.com

链接：

https://gitee.com/xing54321/files/blob/master/iframe内嵌页面通信.zip