9

I have a site that can be displayed in one of two states (let's say normal and debug). In most scenarios, pages on this site will be displayed in the normal state - however there are some instances where this page will be opened as a popup and needs to be displayed in the debug mode.

I am currently achieving this as follows:

JS on the page being loaded listens for a message with:

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

And if the appropirate message is sent, debug mode is entered.


The problem: If the user navigates to a new page (on the same site) in that popup window the new page will have no idea that it is supposed to display in debug mode as the previous original page that the popup loaded recieved the message, but the subsequent page(s) don't recieve that message.

The hacky solution: Keep sending the message repeatedly (i.e. every 1sec) to ensure that any new pages receive the message and enter debug mode. If a page is already in debug mode it ignores any subsequent messages.


I really don't like having to continuously message the page, though, and would rather a cleaner and more efficient solution if one exists. One such idea would be to send a new message if the popup loads a new page, but unfortunately I can't register any event handlers to listen for a page load event as this is a cross-origin operation.

I could also have the page being loaded message the parent to see if it should be in debug mode - but I don't want the page being loaded to be initiating any communication - the first message should originate from the parent.

3
  • 1
    “there are some instances where this page will be opened as a popup and needs to be displayed in the debug mode” - do you really need all that messaging stuff just to determine that? If the page was opened in a popup window, it would have an opener - otherwise, window.opener will just be null. Would/could that not be enough to determine that you are in debug mode (if the page being opened in a popup is really the only criterion that determines that) …?
    – CBroe
    Sep 5, 2017 at 7:38
  • It is possible that this page could be opened as a popup but not be put in debug mode. This would certainly be a less frequent occurrence than the page being opened normally - but I'm trying to find a solution that requires the least amount of effort/complexity on the child page's side (i.e. no messages sent from the child - just an event listener in case the page is sent a message that should put it in debug mode for example).
    – abagshaw
    Sep 5, 2017 at 23:36
  • How are you sending the message to your page in the first place? The way your question is structured leaves some ambiguity in regards to which pages you have control over, which are on the same domain and which are just random 3rd party pages. Overall your options are localStorage for sharing the state, passing a URL flag that the new page understand, or sharing the state server-side.
    – mnewelski
    Sep 11, 2017 at 19:41

3 Answers 3

3
+25

Have you thought about local storage?

Something like

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
}
5
  • As I mentioned in my question, the parent window and the pop-up are on different domains (this is a cross origin operation so I don't think your solution will work).
    – abagshaw
    Sep 5, 2017 at 23:33
  • "If the user navigates to a new page (on the same site)...". Each domain has it's own localStorage flag which is set when it gets the 'go into debug mode' message. Sep 6, 2017 at 5:41
  • ok your solution does somewhat help with the problem but at the cost of introducing more complexity. It doesn't really solve the core problem - say the first page to load in the popup took a long time to load, I'm still going to have to keep sending repeated messages to ensure when it does load it receives the message to go into debug mode and that's what I'm trying to avoid. I'm looking for a clean solution to efficiently communicate once with the child window to go into debug mode.
    – abagshaw
    Sep 6, 2017 at 17:57
  • Fair enough. Could the child window message the parent when the child loads to ask it then? Sep 6, 2017 at 18:53
  • No I'd rather not have the child window message the parent. As I mentioned at the end of my question "I don't want the page being loaded to be initiating any communication - the first message should originate from the parent."
    – abagshaw
    Sep 6, 2017 at 20:43
1

You can pass an argument in the provided URL, just by appending '#debug' or '?debug=on'. Sites usually ignore this.

At the load event you can ask for location.hash or location.search, depending on what you use. Be aware that the change of the search string usually causes a reload and the hash not.

You might have to go through document.links to make this work. May be an 'onhashchange' event handler can be useful too.

1
  • This is an interesting first step - but there are two problems: 1. I can't verify the origin of the page that set the query param debug and 2. I don't think this will be able to persist if the user navigates to a new page (it will only be useful for the first page loaded in the popup as dictated by the parent).
    – abagshaw
    Sep 11, 2017 at 20:15
0

do you have to use only javascript ?

I use a php config variable to put apps in debug mode

then something like if (<?= $cfg['debug'] . "0" ?>) { whatever needs to be done in debug mode} in the javascript code

note that you will need the ."0" if $cfg['debug'] is boolean, otherwise the if condition in javascript is empty when $cfg['debug'] is false an you get a syntaxe error...

purist will probably scream at mixing javascript and php but I don't care about arbitrary rules and never came across a problem because of that (will happily hear justified arguments against it though ... ;) ...)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.