Updating label from inline frame

#1

Hi all,

I’m currently having a battle with dynamically changing the text of a label to show the current page title. The issue is arising because my main pages are within an inline frame and my label is outside it. So my current page in Axure cannot see the widget as it technically sits on another page.

Currently the set up is like so…

image.png1005×840 77.4 KB

When a user clicks the button to go to page 2 for example, when the new page loads (in the frame) i want to update the label at the top to reflect the page title. I had very limited success by passing [[pagename]] through some custom javascript to find the element and set the innerHTML but it really didn’t like me doing that, plus it felt like the wrong way to do it.

I found some posts that related to using something like ‘window.parent.$axure(’[data-label=name of widget]’)’ but I’m not sure on how to about using that to set the text.

Am I going the right way about this? Is this ever going to work in the first place? Any pointers would be greatly appreciated. This is using RP 8.

Thanks.

#2

I ain’t sure if this is possible. Maybe you could make the blue background and the label part of the page? The wrapper page would then only contain the icons, and menu with a transparent background.

#3

Hi!

This is possible with a little bit of javascript embedded in the Open Link command. (Hosting on Axshare is NOT necessary - this isn’t a plug-in.)

Here’s a live sample. Note that this covers talking to the page outside of the iframe from the page in it and vice-versa.

File: communicate_from_iframe.rp (169.8 KB)

[ Edit ] I should point out that in order to update the text of an object using Axure’s .text( value ) function, the text cannot be empty (as authored in Axure). You can set it to “” using the .text() function, but if it’'s null to start with - i.e., in edit mode in Axure - this command doesn’t work. (It can be set to a space if you want it to look empty.)

Altering the state of a dynamic panel from a page loaded in an inline frame
#4

@josephxbrick You’re a lifesaver, I’ve got this working in my site. Lots of other useful snippets in that live example too. Many thanks, much appreciated. :slight_smile:

#5

@josephxbrick Thank you for such a useful example project!

Right now I am trying to communicate from iframe to iframe. Do you have any examples of that kind of behavior? Would the best approach be to use the parent as an intermediary by using your examples of iframe1 to parent then parent to iframe2?

#6

Hi!

I updated the file to contain an example for communicating between two iframes. The widget in one iframe communicates directly with a widget in the other iframe; there is no code on the page that contains the iframes.

Live sample

File: communicate_from_iframe (2).rp (243.1 KB)

#7

Excellent - thanks! There are other things I’d like to do but your examples have given me enough to go on to look into further Javascript capabilities.

#8

Hi! You are welcome.

I just now added an example that sets the other iframe to a different page (which I think you asked about in a different post.) Here we do need to use the page containing the iframes as an intermediary.

communicate_from_iframe (2).rp (262.4 KB)

#9

Even better. Thanks again!

I did figure out how to set a different iframe page using a parent page “controller” widget. The controller widget is just a hidden rectangle widget where I can set variables, interact with other parent page widgets, or use OnMove(0,0) actions for various purposes. Going iframe to iframe is useful but I am finding using a parent page controller widget is even more useful.

#10

@josephxbrick Is it possible to call an object’s OnClick event instead of the OnMove event in Javascript? If it is I can’t seem to get the syntax right to get it to fire. I am trying to trigger a Hot Spot widget’s OnClick in one iframe from a different iframe. Thanks in advance.

#11

You’re a life saver, I learnt a lot from your file too. Thank you! :heart_eyes:

#12

@josephxbrick just a quick note to say thanks for the great example project. Very helpful!