页面和弹窗“通信”的四大方式：孔乙己也懂的JavaScript秘诀

2024-01-17 04:49:30

作为资深的技术宅，“孔乙己”这个名字对我来说再熟悉不过了。

不过，今天孔乙己向我抛出了一个有趣的问题：页面和弹窗之间如何进行“沟通交流”？

这不禁勾起了我的兴趣。作为一个狂热的JavaScript爱好者，我乐于探索页面和弹窗之间复杂的交互世界。

为了便于理解，我将使用通俗易懂的语言，从JavaScript的角度来阐述页面和弹窗通信的四种主要方式。

1. DOM 操作

DOM（Document Object Model）是JavaScript用于操作HTML文档的对象表示形式。通过DOM，我们可以获取、修改和创建HTML元素。

// 获取页面中的弹窗元素
const modal = document.getElementById("myModal");

// 打开弹窗
modal.style.display = "block";

2. 事件监听器

事件监听器允许我们监听页面或特定元素上的特定事件，例如点击、鼠标移动或键盘输入。

// 监听弹窗上的关闭按钮点击事件
const closeBtn = document.querySelector(".close-btn");
closeBtn.addEventListener("click", () => {
  modal.style.display = "none";
});

3. postMessage

postMessage()方法允许页面和弹窗在不同的窗口或框架之间安全地交换数据。

// 从页面向弹窗发送消息
window.parent.postMessage({ message: "Hello from the page" }, "*");

// 从弹窗向页面发送消息
window.addEventListener("message", (event) => {
  if (event.origin !== "https://example.com") return;
  console.log(event.data);
});

4. 模态窗口

模态窗口是一种特殊的弹窗，它会阻止用户与页面其他部分进行交互。

// 创建并显示模态窗口
const modal = new Modal({
  title: "提示",
  content: "确认删除此项目吗？",
  buttons: [
    {
      text: "确定",
      className: "btn-primary",
      onClick: () => {
        // 确认操作
      },
    },
    {
      text: "取消",
      className: "btn-secondary",
      onClick: () => {
        // 取消操作
      },
    },
  ],
});
modal.open();