Fire the onClick event of a page from another one embedded by an iframe

#1

Hy everyone,

I am working on a mobile prototype.
I thought it would be a great idea to achieve a lightweight prototype by separating all my views to different pages.

I have created a main page with a tab bar and an iFrame on it, and whenever I click on a curtain tab, the iframe loads the relevant page.

My problem is that I can not trigger any events from the iframe to the main page where my tabs are.
I would like to fire the onClick event of one of my tabs at the “main page” from an another page embedded by an iframe.
I have seen some solution in another forum topic about javascript injection.

I was looking for a solution here:
http://www.dejongh.dk/wiki/doku.php?id=interaction:axure_api

Unfortunately I could not figure it out yet how to communicate out from an iframe with the onClick event.
I would highly appreciate some help.

19
Screenshot 2019-11-28 at 07.59.19.png768×732 35.8 KB
27
Screenshot 2019-11-28 at 07.59.27.png761×740 30.3 KB

#2

Why are you trying to make it complicated? Any special purpose to use the iFrame?

#3

This is something you should really do with Dynamic Panels in a single page, rather than iFrames. So far as I know, there’s no simple way to pass click events from page to page and I’m pretty sure it’s not possible to pass them into or out of an iFrame.

#4

I am 100% sure about that it is possible. I could already trigger dynamic panel state change from an iframe and back and forth by javascript.

Dynamic panels are good enough. But!

If you use a lot of them in a single page that slows down the prototype. My approach would be a huge performance saver and it would keep the whole project more organized and more realistic.

Axure is not capable of flawlessly handling a large amount of states inside of a dynamic panel, therefore I decided not to keep a complex prototype on one page. I would like to separate each functions (which are usually consisting of flows with several steps - screen variations) on a page.

If I just simply reload a page by clicking on an element of the tab bar, a white page flashes up every time due to the page load, which is disturbing.

I would like to simulate view controllers, and by that take my prototype to the next level.

#5

If you’re doing it with JS you’re outside of Axure support territory but try this, off the top of my head:

window.parent.$axure('widgetname').click()

If that doesn’t work call the click method on the jQuery method of the AxQuery object instead. I can’t remember if the AxQ object has a click method it not, but you can get to the underlying jQuery object.

#6

@jakabbalint

Based on your example, I would think a simple, straightforward approach would be to use a Master header and footer on each of your pages. But if you want to pursue your approach of a main page with Inline Frame for your content pages, you can trigger events on other pages via global variables and a “repeating dynamic panel function” that constantly checks the value of global variable(s). They key to sharing data across pages is the global variable itself. You can do this without javascript injection. Javascript injection offers a way to programmatically set and get global variable values via javascript if you happen to be doing something in javascript already, or you can find or write a function which can do it faster, as the suggestion from @nkrisc might.

In the demo file below, I show a way to do this using native Axure only. The Page Main has a header, footer, inline frame, and a dynamic panel, named “controlFunction” with two empty states. The Loaded event sets itself to “Next, wrap, repeat every 500 ms” and its Panel State Changed event checks the value of OnLoadVariable in a set of conditional cases. This means that every half second you can get the current values of global variables and do something with them. You can decrease the repeat delay to make it more responsive, but at a cost of processing overhead.

As you inspect the interaction code of “controlFunction” you can see it recognizes several “hash characters” used to signal certain types of functions. The ‘@’ char signifies a new page loaded in the inline frame, '&" signifies a footer button should be clicked, for example, “&1” means “cilck footer button 1”, and ‘!’ signifies a button click counter should be incremented.

So, to remotely trigger an event on the main page from any other page, just set the value of OnLoadVariable, prefaced by one of the special “hash characters” and it will automatically be handled --within 500 ms. Add more cases to “controlFunction” to handle other needs–just remember to reset the global variable used so the case doesn’t repeatedly get called forever.

I don’t think you can get around that when using an inline frame, as it is an effect of loading a new page, as much or more due to the web browser as it is Axure. I suppose you could have two inline frames, same size and location with one in front of the other. Load the “new” page in the frame behind, then bring it to front. That should provide a quick transition visual effect, albeit with a pause for the new page to load enough to avoid the “blank page flash.”

pass clicks.rp (109.7 KB)

#7

As I thought about this more, I realized this should work and the system I set up could automatically account for the page load delay. Each content page (e.g,. Page 1, Page 2) uses its Page Loaded event to set OnLoadVariable to “@[[PageName]]” which of course happens once the page is loaded. So, on Page Main, when the controlFunction panel detects an ‘@’ char the new page has already loaded–so that is when the inline frame swap should happen. To easily keep track of which iframe is “active” (on top) I just created another global variable, “Frame”. See the results here:

pass clicks 2.rp (116.1 KB)