I have an iFrame component on one of my pages. The source URL of the iFrame is from another domain. The page from the other domain tells me the user is done with their work there and sends my page a message via: parent.postMessage(“userDone”,“http://otherdomain.com”);
Receiving postMessage data is my only viable integration option with the external page.
My page receives and handles the “userDone” message (no issues with this part, it’s working well with custom code) and then needs to send the user to another page in my app. I don’t want to redirect the user to my other page using JavaScript because I don’t want my Backendless SPA to do a page refresh (I lose App Data properties that I need if it refreshes), so my solution at the moment is to call a custom Backendless function from custom code that calls Go To Page. Parameters need to be passed in the Go To Page call. My solution looks like this:
When I get the “userDone” message from the iFrame I call my custom function:
Go To Page in the function call works well the first time it’s called, but there are issues when called in subsequent times. I’m seeing that when the URL is changed (because I pass a parameter to it), the Main page events (I tried On Before Page Enter and On Page Query) don’t seem to run and I have page styling issues.
Any advice on how to send a user to a page from custom code, with support for URL parameters, without page refresh, and without issues?
We checked the “On Page Query” handlers, and we didn’t have any problems with them.
Can you provide the steps so we can reproduce the problem ourselves?
I just did some tests and I’m seeing and realizing for the first time that the On Page Query handler fires multiple times, once for each query the page receives since the start of the session. This is quite surprising, I had no idea that this is the behaviour. If the page is called with ?page=PageName&data={“param1”:“value1”}, then ?page=PageName&data={“param1”:“value2”}, then ?page=PageName&data={“param1”:“value3”}, On Page Query handler, on each call to the page (using Go To Page for example), runs a CUMULATIVE number of times, in this case 3 times by the time I call the page and pass in value3! Previous Page Query and Page Query arguments seem to be filled in a sort of queue or list in the background.
Is this the design you intended? Why would anyone need the entire history of query params? This is a surprising approach to me.
With this design, I guess we need to inspect the Page Query argument to get the param we need and execute logic conditionally since the handler runs multiple times. We can’t just inspect Page Data for parameters passed in.
Please share if this is the best approach. Thanks again.
I can’t even use the param1 value in the Page Query argument since Page Query is filled with the parameter value of every previous value of param1, so is always considered valid. I have no idea how to proceed with detecting a valid parameter with this handler design. Please help.
Is this the design you intended? Why would anyone need the entire history of query params? This is a surprising approach to me.
We’ve added the “On Page Query” handler by your request in the following topic:
Is this the design you intended? Why would anyone need the entire history of query params? This is a surprising approach to me.
yes, it’s by design, the handler runs on each change in the query. There could be a logic which depends on combinations of several params, so we need to run on any change
In order to run some logic only when a parameter is changed you need to compare it in the prev and current query params block
Thanks Vlad. On Page Query, in the example I provided where I call the page 3 times with a different parameter each time, will run for EACH query that was passed both present and past. By call #3 (using Go To Page), it runs 3 times, and each time Page Query and Previous Page Query will have different values, so the condition you show will always be true. I am just looking for the latest value of Page Query. How do I get that?
I don’t think I’m calling Go To Page multiple times unnecessarily. I have a List page and a Detail page. It’s normal for the user to go back and forth, passing parameters in both directions, and I don’t know any other way than to use Go To Page to do this. I’m working on reproducing the issue with a simple example and will share here shortly.
I finally figured out the problem. For some strange reason, the “userDone” message from parent.postMessage() is received multiple times by my page EACH time postMessage is called, which is why my page has been calling Go To Page multiple times. I’ve now added code to ensure that the message is processed only once, ensuring that Go To Page is only called once. There is, of course, nothing wrong with the On Page Query handler. Thanks again for your help. This one wasn’t easy to figure out. We can close this issue.
