我有我的商店页面，想创建一个允许用户从手机上传照片的功能。我需要一个显示二维码的弹出窗口，关闭后，照片会出现在我的上一页上。
如何创建该弹出窗口？
我尝试过：
window.open("qr.html", "_blank", "left=100,top=100,width=320,height=320");
但它不能解决问题，我需要在此弹出窗口关闭后启动代码。 怎么办？
要实现您所描述的功能，您可以使用JavaScript的
window.open()window.addEventListener()以下是有关如何执行此操作的分步指南：
qr.htmlqrcode.js<!DOCTYPE html>
<html>
<head>
<title>QR Code Popup</title>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
</head>
<body>
<div id="qrcode"></div>
<script>
const urlToEncode = "https://example.com"; // Replace with the URL you want to encode
const qrcode = new QRCode(document.getElementById("qrcode"), {
text: urlToEncode,
width: 256,
height: 256,
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My Shop Page</title>
</head>
<body>
<!-- Your shop content here -->
<button id="uploadButton">Upload Photos</button>
<script>
document.getElementById("uploadButton").addEventListener("click", function () {
const popup = window.open("qr.html", "_blank", "left=100,top=100,width=320,height=320");
// Listen for the 'unload' event on the popup window
popup.addEventListener("unload", function () {
// Handle the event when the popup is closed
// This is the code you want to run after the popup is closed
handleUploadedPhotos();
});
});
function handleUploadedPhotos() {
// Code to handle the uploaded photos after the popup is closed
// For example, you can retrieve the uploaded photos and display them on the shop page.
// Implement this function according to your needs.
console.log("Photos uploaded and popup closed!");
}
</script>
</body>
</html>
上面的代码在“上传照片”按钮上设置了一个事件侦听器。单击该按钮时，会使用
qr.htmlwindow.open()handleUploadedPhotos()请记住将
urlToEncodeqr.html通过这种方法，您应该能够在弹出窗口中显示二维码，并在弹出窗口关闭后在主页上执行代码。