ToolBox - JS to Bubble - doesnt work with iFrame

Need help Plugins
1

I have found that JS to Bubble (ToolBox) doesnt work if I define the HTML as iFRAME… any reason ? Also , if my HTML is not IFRAME , my 'SearchBox doesnt work with the Geographic search

1 Like
2

Javascript in an iframe needs to refer to its window.parent to access functionality on the Bubble page.

2 Likes
3

Thanks Mishav … not sure though what does this mean. How do I do that ?

4

Something like this @yaron.regev

window.parent.bubble_fn_runme("blah");

4 Likes
5

Great !
It works !!!
Thanks heaps

1 Like
6

I’m trying to use WebRTC on Bubble without users downloading a third-party app (like Gruveo or Appear.in). Basically I want to allow a user to video chat with the click of a button. Is this what you were trying to do yaron.regev?

7

HI,

No … not at all.
I had a map in iFrame with some JS and I couldnt right to bubble DB without the solution that mishav suggested.

But… what is the problem you are facing ?

8

@yaron.regev could you share what you did as an example please( without sharing anything sensitive) im trying to work out how write back to bubble from an iframe with Toolbox.

9

as simple as that:

window.parent.bubble_fn_runme(“blah”);

In your HTML (iFrame) add this function call where ‘runme’ equals to your suffix allocation on the ‘js to bubble’ entity and “blah” is the paramater (or value) you want to eight into the DB.

2 Likes
10

Hi @mishav

First of all, sorry for my poor English.

I can´t call this function on HTML

    <script>
        var video = document.getElementById("myVideo"); 
        var btn = document.getElementById("myBtn");              
        function myFunction() {   
            if (video.muted) {     
                video.muted = false;  
                btn.innerHTML = "";
	    window.parent.bubble_fn_ativasom(“back”);
            }
        } 
    </script>

It doesn´t work, works only I remove this line:

window.parent.bubble_fn_ativasom(“back”);

Can you help me, please?

Have a nice day :slight_smile:

Thanks

11

image
image952×156 14.8 KB

It doesn’t look like valid quotes. Please try to use:
""

12

Hi @lottemint.md
Thanks for the tip!
Littles details … great results :slight_smile:

Now is runnig, but a I can´t get “back” value on Bubble.
Do you know how if I have to set any expression on JS to Bubble do retrive this value?

Thank you very much!

1 Like
13

Hi @lottemint.md ottemind,

First I would like to thank you for your attention.

I will detail the situation a little:

  1. I have an HTML page that was defined as the URL source in the “Advanced iframe / Embed website Plugin for Bubble”.
  2. On this HTML page, pressing a button runs the following function

function myFunction() {
if (video.muted) {
video.muted = false;
btn.innerHTML = “”;
window.parent.bubble_fn_sounds(“12345”);
}
3) I would like to pass the value “12345” to my Bubble app.

Could you let me know how I would be able to receive the value “12345” in Bubble ?

Again, thank you for your attention and wish you a great day.

Thank you very much

PS: I´m using " " … but this forum page change post automatically.

1 Like
14

Hello,

It might help if you have a look at the demo.

Preview
username
password
https://just4tests8.bubbleapps.io/version-test/javascript_to_bubble

Editor

You need to use window.parent.bubble_fn_sounds only if you are using an iFrame.
If you are not using an iFrame, please try window.bubble_fn_sounds.

Also, the window.parent.bubble_fn_sounds should be triggered inside of your iFrame.

Let me know if you have any questions, please.

1 Like
15

Thanks @lottemint.md

Thank you very much for explaining and sending the example.

I understood how it works.

If placing the Iframe inside an HTML works perfectly, however, if you define the iframe from an external source (https://www.realiz.com.br/site/lab/fullvideo/blank.html) the value is not sent to the Bubble.

I believe it is some safety rule.

16

Can you please attach a screenshot of your HTML element?

17

Screenshot_3

18

That means that you need to add the code to the following website:
https://www.realiz.com.br/site/lab/fullvideo/blank.html

1 Like
19

Your the real MVP :wink:

1 Like