How do I pass data from an IFrame to the parent page

Need help
1

Hi there,

I have a situation where I have a bubble page embedded into another bubble page as an iFrame. I want to be able to select an option from the embedded page, say a radio button, and have that value passed back to the parent page. I am playing around with the Toolbox plug in and the Run Javascript action together with the Javascript To Bubble element but no luck so far. Does anybody have any insights here?

Many thanks

Frank

2

If both apps are on the same domain, you can access the iframe elements with

iframe.contentWindow.document

if not you will need to setup a postmessage communication: javascript - How to communicate between iframe and the parent site? - Stack Overflow

3

Thank you!
Are you give me a little more here.
What do I do in the embedded page? Use a workflow action to send data to an element. What element?
Then on the parent page, how do I get that data? How do I use ‘iframe.contentWindow.document’ and does ‘document’ refer to the element on the child page?
Thank you!

4

FYI, while what @rafael.g.l.silva says is technically true, a much better answer is:

“You don’t, in general, do this with iFrames because, in general, you can’t.”

Also, even though in your case, you might be able to (if your host Bubble page and the iFramed Bubble page are from the same app), there’s no good vanilla Bubble mechanism for communicating through the iFrame.

IF these things are in the same app, what we would do in Bubble is (1) probably not use an iFrame and instead make the embedded thing a reusable and (2) in vanilla Bubble we’d just communicate that state change in the radio button via some write to the database or via setting some state on the reusable. If we are fancy, we might instead (3) write that state change to a key in localStorage and watch for that key to change in the host page (I’m unaware of any Bubble plugin that does this, though coincidentally I have one coming soon that does).

Option 4 (which I almost forgot to write down here) is to communicate via your app’s API (yes, an app can call its own API’s), though at the end of the day, this wouldn’t be any different than doing some database write that the host page is watching for.

What is it you’re trying to do, exactly? (And, if you need some radio button in the host page, why not just put the damn radio button there?)

5

Anyway, if these two things are separate Bubble apps, the right way to communicate between them is via their APIs. (What is it the radio button represents? Fetch that from ”app b”’s API. Display that in “app a” whatever way is appropriate. If it’s changed THERE, communicate that back to app b.

6

Thanks Keith,
let me answer the last question and then go away and digest the rest.
I run a small call centre and we receive and process calls for many clients using a pbx page that I have created. This page has lots of groups that show and hide based on if there is content there. Example, we have a group called Contacts and so if contacts are added for this client, then that group appears. We have one called Strata Plans, so if Strat Plans are added for that client, the group appears (count > 0 then show). On that PBX page we have a group that is the Message Panel and based on the item we select, data is pushed to a state in that group - ie, if we select a contact, that contact is sent to the group and the email address of that contact is passed through so the message is delivered to the right person.

We have a few clients where their situation is so specific that we have designed completely custom pages but each of those pages also have a message panel so the issue is that maintaining all these pages becomes a large task. The plan is take all the customer specific page and cut them right back with no message panel and embed them into the main pbx page and have data passed from the nested page to the main page. That means our agents only ever see one page and that gives me just one page that I need to maintain in terms of processing data into a message .

Cheers
Frank

7

It’s all in one app

8

Ah, in that case (which is quite unusual in that the approach you’re proposing isn’t a terrible idea :wink: !) you could actually communicate via localStorage between the pages. My new plugin would be pretty much ideal for that. I’m still working on a couple little things for it and haven’t done videos yet, but maybe I’ll just punt on the enhancements and work on getting it published before the end of the week.

(Note that, if you try to jigger this together yourself you will find it pretty challenging as it sounds like you need to pass just not simple text changes, but potentially Things (contacts), and Lists of such Things as well. Also, watching for changes in localStorage across sessions — while not exactly difficult — is not trivial. But my new plugin does all of that and makes it SUPER easy to configure in Bubble. Also, it’s going to be pretty cheap at launch - like $10 once so way cheaper than your time.)

1 Like
9

Thanks Keith, I look forward to receiving

I am trying to do it wit the toolbox plugin and getting this error

Uncaught TypeError: window.parent.bubble_fn_iframe is not a function
at eval (eval at (Toolbox-action–Run-javascript-.js:1:1), :1:15)
at eval (Toolbox-action–Run-javascript-.js:3:46)

I have dropped the JavaScript to Bubble element on the parent page and set the bubble_fn_suffix to be bubble_fn_iframe. Then I am running on the child page in the JS Workflow action the js

window.parent.bubble_fn_iframe(“SomeText”);

Any thoughts?

Cheers
Frank

10

Well, that’s not how you’d do that. The iFramed page (let’s call it page b) would Run JavaScript and execute a call to localStorage.setItem().

In the page that hosts the iFrame (page a) you would have an event listener watching for changes to whatever key(s) you’re writing in page b.

When that event listener fires, you would read the data from the key(s) that have changed and send them back up to bubble.

Note that the values will be strings and you’ll have to turn them back into the correct types if strings aren’t sufficient for your use case.

And then, if page a needs to communicate changes back to page b you’d do the same thing in reverse.

Learn about localStorage interface:

Again, it’s not super simple, especially with hacks like Run JavaScript.

11

Thanks Keith,
let me try and unravel this
cheers
Frank

12

Thank you everyone for your help and thank you @davidscott.pal for your help in solving this.

In summary:
Firstly, I used an iFrame Generator here to create my iframe

On The Parent Page

  • I placed an html element on the page
  • I put the iframe code from above into that html element.

Important: DO NOT tick ‘Display as an iFrame’ in the html element. We had this ticked and it was not working. As soon as we unticked, it worked.
image

  • I placed the JavascriptToBubble element and configured it with value ‘test’ and type number.
    image
  • I added a text element to the page to display the contents of the ‘JavascripttoBubble A’ element
    image

On the child or nested page

  • I added the Run Javascript action item
  • I added the javascript window.parent.bubble_fn_test(1234)
    image
  • note that 1234 is simply test text I am sending from the child to the parent

IMPORTANT: if you are passing text, you need to enclose the text in quotes with in your Run Javascript action
image

I hope this is useful to others
Cheers
Frank

13

This topic was automatically closed after 70 days. New replies are no longer allowed.