如何创建关闭后可在店铺页展示照片的二维码弹窗？

核心思路 #

通过保存window.open的弹窗实例，监听其关闭状态，同时在弹窗页面完成照片上传关联后，将数据传递给父页面，最终在弹窗关闭时触发照片展示逻辑。

1. 父页面（店铺页）代码实现 #

首先在店铺页面中，保存弹窗实例并监听关闭事件，同时提供接收照片数据的方法：

// 店铺页JS代码
let qrPopupInstance;
const photoContainer = document.getElementById("photo-container");

// 打开二维码弹窗
function openQrModal() {
  // 打开弹窗并保存实例
  qrPopupInstance = window.open("qr.html", "_blank", "left=100,top=100,width=320,height=320");
  
  // 定时检查弹窗是否关闭
  const closeChecker = setInterval(() => {
    if (qrPopupInstance.closed) {
      clearInterval(closeChecker);
      // 弹窗关闭后执行照片展示逻辑
      renderUploadedPhoto();
    }
  }, 500);
}

// 接收弹窗传递的照片数据
function acceptPhotoData(photoInfo) {
  // 用localStorage暂存数据，避免页面刷新丢失
  localStorage.setItem("shopUploadedPhoto", photoInfo);
  // 可主动关闭弹窗，或让用户手动关闭
  qrPopupInstance.close();
}

// 渲染照片到店铺页面
function renderUploadedPhoto() {
  const photoData = localStorage.getItem("shopUploadedPhoto");
  if (!photoData) return;
  
  const imgElement = document.createElement("img");
  imgElement.src = photoData; // 支持base64或图片URL
  imgElement.style.maxWidth = "300px";
  imgElement.style.marginTop = "10px";
  photoContainer.appendChild(imgElement);
  
  // 清理暂存数据
  localStorage.removeItem("shopUploadedPhoto");
}

在店铺页面的HTML中，需要添加触发按钮和照片容器：

<!-- 店铺页HTML片段 -->
<button onclick="openQrModal()">扫码上传照片</button>
<div id="photo-container"></div>

2. 弹窗页面（qr.html）代码实现 #

弹窗页面负责展示二维码，并在检测到照片上传完成后，将数据传递给父页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>扫码上传</title>
  <style>
    body { text-align: center; padding: 20px; }
    img { width: 250px; }
  </style>
</head>
<body>
  <h3>扫码上传店铺照片</h3>
  <!-- 替换为你的上传二维码，扫码后跳转手机上传页面 -->
  <img src="upload-qr.png" alt="上传二维码">
  
  <script>
    // 实际场景中：通过轮询后端接口，检查当前会话是否有新上传的照片
    // 示例：模拟上传完成后传递数据
    setTimeout(() => {
      // 从后端获取的照片URL或base64数据
      const uploadedPhoto = "https://example.com/uploaded-photo.jpg";
      // 调用父页面的方法传递数据
      window.opener.acceptPhotoData(uploadedPhoto);
    }, 6000); // 模拟等待6秒完成上传
  </script>
</body>
</html>

关键注意事项 #

• 同源限制：父页面和弹窗页面必须同源（同一域名、协议、端口），否则无法通过window.opener调用方法。若需跨域，改用postMessage传递数据。
• 弹窗拦截：window.open必须通过用户主动交互（如按钮点击）触发，否则会被浏览器拦截。
• 数据关联：手机上传时，需通过会话ID或用户标识关联到当前店铺页面，确保弹窗能获取到对应的上传照片。

内容的提问来源于stack exchange，提问作者user22265143