javascript - 替代使用 postMessage() 连续消息弹出来控制状态

Question

我有一个可以显示为两种状态之一的站点(比如说正常 和调试)。在大多数情况下，此站点上的页面将以正常 状态显示 - 但在某些情况下，此页面将作为弹出窗口打开，需要在调试中显示em>模式。

我目前的实现如下:

正在加载的页面上的 JS 监听消息:

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

如果发送了适当的消息，则会进入调试模式。

---

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

hacky 解决方案:不断重复发送消息(即每 1 秒一次)以确保任何新页面都能收到消息并进入调试 模式。如果页面已经处于 Debug模式，它会忽略任何后续消息。

---

不过，我真的不喜欢必须不断地向页面发送消息，如果存在的话，我宁愿有一个更干净、更高效的解决方案。一个这样的想法是在弹出窗口加载新页面时发送一条新消息，但不幸的是我无法注册任何事件处理程序来监听页面加载事件，因为这是一个跨域操作。

我也可以让正在加载的页面向父级发送消息，以查看它是否应该处于 Debug模式 - 但我不希望正在加载的页面启动任何通信 - 第一条消息应该来自父级。

Answer 1

你有没有想过local storage ？

有点像

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
}