替代使用postMessage()来控制状态的连续消息弹出窗口

Question

我有一个站点,可以显示在两种状态之一(让我们说正常和调试).在大多数情况下,此站点上的页面将以正常状态显示- 但是在某些情况下,此页面将作为弹出窗口打开,并且需要在调试模式下显示.

我目前正在实现以下目标:

正在加载的页面上的JS侦听带有以下内容的消息:

window.addEventListener("message", enterDebugMode, false);

如果发送了适当的消息,则进入调试模式.

---

问题:如果用户导航到该弹出窗口中的新页面(在同一站点上),新页面将不知道它应该在调试模式下显示为弹出加载的前一个原始页面收到的消息,但后续页面没有收到该消息.

hacky解决方案:继续重复发送消息(即每1秒)以确保任何新页面接收消息并进入调试模式.如果页面已处于调试模式,则忽略任何后续消息.

---

不过,我真的不喜欢不断地向页面发送消息,而且如果存在的话,我宁愿更清洁,更有效的解决方案.一个这样的想法是在弹出窗口加载新页面时发送新消息,但遗憾的是我无法注册任何事件处理程序来监听页面加载事件,因为这是一个跨源操作.

我也可以将页面加载消息父母看看它是否应该处于调试模式 - 但我不希望加载的页面启动任何通信 - 第一条消息应该来自父级.

Answer 1

您考虑过本地存储吗？

就像是

function setupDebug() {
    // do whatever awesome debug stuff you need to do
}

function enterDebugMode() {
    window.localStorage.setItem("debug", true);
    setupDebug();
}

window.addEventListener("load", function () {
    if (window.localStorage.getItem("debug")) {
        setupDebug();
    }
}, false);

function leaveDebugMode() {
    window.localStorage.removeItem("debug");
    // Turn off the debug stuff
}